Jquery全选全不选操作的最简单代码
博客专区 > 超龍 的博客 > 博客详情
Jquery全选全不选操作的最简单代码
超龍 发表于5个月前
Jquery全选全不选操作的最简单代码
  • 发表于 5个月前
  • 阅读 7
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

需求:

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);

 

共有 人打赏支持
粉丝 0
博文 30
码字总数 8618
×
超龍
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: