jQuery在页面获取checkbox数组时:
使用 var num = $("input:checkbox[name=cbx]:checked'").length; 即可获得所有name属性为"cbx"的checkbox数组。通过length属性即可得到数组长度。
取id="cbxAll"是有讲究的,因为id="cbxAll"的话,相当于点了这个checkbox就是全选,再点一次就全部取消选中。
<input type="checkbox" id="cbxAll" value=""/>
$(function() {
var cbxLength = $("input[name='cbx']").length;
var selCbxLength = 0;
$("input[name='cbx']").each(function() {
if ($(this).attr("checked") == true) {
selCbxLength++;
$(this).parents("tr").addClass('selected');
$(this).parents("tr").attr('cbxSelect', 'Y');
}
});
$("#cbxAll").click(function() {
if ($(this).attr("checked") == true) {
selCbxLength = cbxLength;
$("input[name='cbx']").each(function() {
$(this).attr("checked", true);
$(this).parents("tr").addClass('selected');
$(this).parents("tr").attr('cbxSelect', 'Y');
});
} else {
selCbxLength = 0;
$("input[name='cbx']").each(function() {
$(this).attr("checked", false);
$(this).parents("tr").removeClass('selected');
$(this).parents("tr").attr('cbxSelect', 'N');
});
}
});
$("input[name='cbx']").each(function() {
$(this).click(function() {
event.cancelBubble = true;
if ($(this).attr("checked") == true) {
selCbxLength++;
$(this).parents("tr").addClass('selected');
$(this).parents("tr").attr('cbxSelect', 'Y');
} else {
selCbxLength--;
$(this).parents("tr").removeClass('selected');
$(this).parents("tr").attr('cbxSelect', 'N');
}
if ($(this).attr("checked") == true) {
if (selCbxLength == cbxLength) {
$("#cbxAll").attr("checked", true);
}
} else {
$("#cbxAll").attr("checked", false);
}
});
});
$(".list>tbody tr").hover(function(){
$(this).addClass("selected");
}, function(){
var f = $(this).attr("cbxSelect");
if (f != 'Y') {
$(this).removeClass("selected");
}
});
.list{width:754px;background:url(../images/table_bg.gif) left top repeat-x; border:1px solid #d1dbff; border-top:none!important;}
.selected {background: url(../images/td_bg.jpg) left top repeat-x #d9f79d;}
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="list">
<thead>
<tr>
<th><input type="checkbox" id="cbxAll" value=""/></th>
<th>编号</th>
<th>名称 </th>
<th>时期</th>
<th>金额</th>
<th>日期</th>
<th>备注</th>
<th>次数</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="cbx" value=""/></td>
<td>1251321313131 </td>
<td>高尔夫球及球具</td>
<td>2010-01</td>
<td>100.00</td>
<td>2010-01-01</td>
<td>无</td>
<td class="num">2</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" value=""/></td>
<td>1251321313131 </td>
<td>高尔夫球及球具</td>
<td>2010-01</td>
<td>100.00</td>
<td>2010-01-01</td>
<td>无</td>
<td class="num">4</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" value=""/></td>
<td>1251321313131 </td>
<td>高尔夫球及球具</td>
<td>2010-01</td>
<td>100.00</td>
<td>2010-01-01</td>
<td>无</td>
<td class="num">3</td>
</tr>
</tbody>
</table>
分享到:
相关推荐
jquery checkbox 选中 取消 checkbox多选
JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值
jQuery基于layui插件制作checkbox复选框选中代码,权限范围多选、单选、全选代码;checkbox父级子级结构,父级选中,子级全选,子级没有选中父级取消选中效果。
下面小编就为大家带来一篇jquery获取所有选中的checkbox实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery实现复选框checkbox的全选与反选功能,不用多介绍了吧,以往都是基于纯js的实现比较多,这个是引入了jquery,或许更能满足现在的前端设计吧。
jquery 实现鼠标单击行时,改变行的背景颜色,选中checkbox复选框
C#.net下通jQuery实现的由CheckBox来控件CheckBoxList的全选操作,通过CheckBox来全选CheckBoxList,当有一个CheckBoxList选中时,CheckBox则被选中,且并且可以取得选中的CheckBox和CheckBoxList的value和text
jquery-ui-multiselect实现多选下拉框的效果,支持下拉多选的一个小demo
jquery获取checkbox选中的值,包括全选 取消全选 反选 选中奇数行 获取选中的值
jQuery_treetable实现checkbox树,实现多级联动,适用于权限树等各类需要树形结构数据的场景
自动动手写了个操作checkbox,里面包括全选、全不选、反选、获取选中值四个功能...
jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...
Jquery全选反选Checkbox 简单好用 复用性很好 欢迎下载
使用JQuery封装的Select&Checkbox&Radio脚本-维豪信息技术有限公司内部, 通过 firefox, ie等系列浏览器测试.
自己编写的一个jquery多选checkbox下拉框,已经封装好了,直接调用就可以
jQuery多级复选框checkbox选中代码,支持水平横向与垂直纵向排列,共有3种排列样式,具体看演示。
基于jQuery的Checkbox精美样式插件 .
JQuery实现checkbox的全选取消全选