Jquery全选全不选操作的最简单代码

需求：

1.点击“全选/全不选”，当此选择框是未选择状态则选中，下面的选择框也全选中；

2.点击“全选/全不选”，当此选择框是选择状态则取消选中，下面的选择框也全取消选中；

3.当下面的选择框全部选中后，“全选/全不选”选择框选中；

4.当下面的选择框有一个取消选中后，“全选/全不选”选择框取消选中；

HTML代码如下：

<input type=”checkbox” name=”id”  class=”subcheck”  value=”1″ />1<br />
<input type=”checkbox” name=”id” class=”subcheck”  value=”2″ />2<br />
<input type=”checkbox” name=”id” class=”subcheck”  value=”3″ />3<br />
<input type=”checkbox” name=”id” class=”subcheck”  value=”4″ />4<br />
<input type=”checkbox”  name=”id”   id=”allCheckbox”  value=””/>全选/取消全选

Js代码如下：

$(‘#allCheckbox’).unbind().bind(‘click’, function() {
$(‘.subcheck:not(:disabled)’).prop(‘checked’, $(this).is(‘:checked’));
});
//当没有选中某个子复选框时，allCheckbox取消选中
$(‘.subcheck:not(:disabled)’).unbind().bind(‘click’, function() {
console.log($(‘.subcheck’).size() == $(‘.subcheck:checked’).size());
$(‘#allCheckbox’).prop(‘checked’, $(‘.subcheck’).size() == $(‘.subcheck:checked’).size());
});

以上代码需要注意的是：用prop，不要用attr，否则只会执行一次。

获取选择的id值：

//获取选择的id
var valArr = new Array;
$(‘input[type=checkbox].subcheck:checked’).each(function(i) {
valArr[i] = $(this).val();
})
var vals = valArr.join(‘,’);
console.log(vals);