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>