html代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Simple jsp page</title>
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../js/checkbox.js"></script>
</head>
<body>
<form action="#" method="post">
<input type="checkbox" id="select"/> 全选<br/>
<input type="checkbox" value="1" name="items"><br/>
<input type="checkbox" value="2" name="items"><br/>
<input type="checkbox" value="3" name="items"> <br/>
<input type="checkbox" value="4" name="items"> <br/>
<input type="checkbox" value="5" name="items"> <br/>
<input type="checkbox" value="6" name="items"> <br/>
<input type="checkbox" value="7" name="items"> <br/>
<input type="checkbox" value="8" name="items"> <br/>
<input type="checkbox" value="9" name="items"> <br/>
<input type="checkbox" value="10" name="items"> <br/>
<input type="checkbox" value="11" name="items"> <br/>
<input type="submit" id="submit" value="提交">
</form>
</body>
</html>
js代码
$(function() {
$("#select").click(function() {
if ($(this).attr("checked")) {
$("input[name=items]").each(function() {
$(this).attr("checked", true);
});
} else {
$("input[name=items]").each(function() {
$(this).attr("checked", false);
});
}
});
//得到选中的值,ajax操作使用
$("#submit").click(function() {
var text="";
$("input[name=items]").each(function() {
if ($(this).attr("checked")) {
text += ","+$(this).val();
}
});
alert(text);
});
});
分享到:
相关推荐
通过以上介绍,我们可以了解到遍历**CheckBoxList**、获取选中项的值以及动态绑定**CheckBoxList**的基本原理和实现方法。这些知识点对于开发基于ASP.NET Web Forms的应用程序来说非常重要,可以帮助开发者更好地...
点击按钮获取选中的CheckBox值,JQ实现,代码非常简单。
- `checkAll(name)`: 当选中一个父项时,该函数会被触发,其作用是将所有名为`name`的子项CheckBox选中。 - `clearAll(name)`: 当取消选中父项时,该函数会清除所有同名子项CheckBox的选择状态。 - `checkSingle...
jquery 实现鼠标单击行时,改变行的背景颜色,选中checkbox复选框
综上所述,实现"checkbox全选,选中数据传到后台"的功能,涉及到前端的HTML、CSS、JavaScript(特别是AJAX)技术,以及后端的Struts2框架、Spring框架和Hibernate ORM的使用。此外,还需要对数据库操作有深入理解,...
例如,我们可以创建一个背景框,并在`checkbox`被选中时改变其颜色。 ```css .custom-checkbox label::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1...
在本文中,我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框,包括权限范围的多选、单选以及全选操作。同时,我们也将关注于父级和子级复选框之间的联动关系,即父级选中时子级全部选中,而...
在本篇内容中,我们将详细探讨如何使用JQuery来遍历checkbox元素,并获取所有被选中项的value值。 首先,我们需要理解checkbox元素在HTML中的基础结构,通常一个复选框由一个标签表示,其中type属性被设置为...
:checked :匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option) js: //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s=...
"JQ checkbox 全选和全不选"这个主题聚焦于jQuery如何实现复选框的选择功能,特别是全选和全不选的交互效果。这种功能常见于数据表格或列表的筛选中,允许用户一次性选择或取消选择所有项目。 首先,我们需要了解...
当该元素被点击时,所有类型的复选框(`$(":checkbox")`)的`checked`属性将被设置为当前`#SelectAll`元素的`checked`属性值。这意味着如果`#SelectAll`被选中,所有复选框也会被选中;反之则全部取消选中。 #### 3...
### jQuery实现全选CheckBox功能详解 #### 背景与需求 在Web开发中,特别是在表单处理方面,经常会遇到需要实现多个复选框(CheckBox)的“全选”、“反选”等功能的需求。这样的功能不仅可以提升用户体验,还能...
获取所有name为spCodeId的checkbox var spCodesTemp = ""; $('input:checkbox[name=spCodeId]:checked').each(function(i){ ...以上这篇jquery获取所有选中的checkbox实现代码就是小编分享给大家的全部内容了,希
代码如下: $(“input”).attr(“checked”,”checked”) 设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,而且,值为checked,但是页面显示仍然为未选中状态 代码如下: $...
jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...
开发者可能会使用伪类如`:checked`来改变选中状态下的样式,以及`:before`或`:after`伪元素来创建自定义的复选标记图形。 2. **jQuery选择器和方法**:`jQuery`库提供了丰富的选择器和方法来操作DOM元素。在这个...
本教程主要探讨的是如何使用jQuery实现多级复选框(checkbox)的功能,包括水平横向、垂直纵向两种排列方式,并且提供了三种不同的样式供选择。通过这个项目,我们可以学习到如何用jQuery控制复选框的状态,以及如何...
在这个"CheckBox美化 jq插件 滑动开关"项目中,我们使用jQuery库来实现这一功能。jQuery是一个轻量级、高性能的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。通过编写少量的代码,我们可以实现...
// 获取所有选中Checkbox的值 ``` 3. **检查Checkbox是否被选中**: ```javascript if ($('#checkbox1').is(':checked')) { console.log('Checkbox is checked'); } else { console.log('Checkbox is not ...
接下来,`jq.js`文件是jQuery脚本,用于实现CheckBox的美化。jQuery可以轻松地选中元素并应用CSS样式,或者通过监听事件来改变元素状态。例如,使用以下jQuery代码,我们可以改变CheckBox的默认样式: ```javascript...