jQuery获取checkbox是否选中,设置值,checkbox全选全不选功能

html部分:

<ul class="titleUl">
   <li class="checkboxLi smLi"><input type="checkbox" class="checkboxOfLi selectAllLi"/></li>
    <li class="titleItemLi smLi">序号</li>
    <li class="titleItemLi lLi">寿命</li>
</ul>

<ul class="contentUl">
    <li class="checkboxLi smLi"><input type="checkbox" class="checkboxOfLi selectItemLi"/></li>
    <li class="titleItemLi smLi">1</li>
    <li class="titleItemLi lLi">350</li>
</ul>
<ul class="contentUl">
    <li class="checkboxLi smLi"><input type="checkbox" class="checkboxOfLi selectItemLi"/></li>
    <li class="contentItemLi smLi">2</li>
    <li class="contentItemLi lLi">2</li>
</ul>

1. 设置checkbox选中和不选择状态:

// 设置选中
$(".selectItemLi").attr('checked',true); 
//  或
$(".selectItemLi").prop('checked',true);
// 设置不选中
$(".selectItemLi").attr('checked',false); 
// 或
$(".selectItemLi").prop('checked',false);

2. 获取checkbox值

// 获取是否选中,true为选中,false为未选中
$(".selectAllLi").is(':checked')

3. 全选和全不选

/**
* 全选
*/
$(".selectAllLi").click(function () {
    if ($(".selectAllLi").is(':checked')){
        $(".selectItemLi").prop('checked',true);
    } else{
        $(".selectItemLi").prop('checked',false);
    }
})

ps: 切换状态用到prop方法,试过用attr来切换,发现第一次切换成功了,第二次下面的checkbox状态未变更,暂时没找到原因,用prop则没有bug。如果后期找到原因会来更新。

样式:全选
在这里插入图片描述

全不选
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值