在jquery用一个按钮实现全选/全不选的效果(attr和prop的区别使用)

<html>
   <head>
     <script type="text/javascript" src="jquery-2.2.1.min.js"></script>
     <meta charset="utf-8"/>
      <script type="text/javascript">
        var  i=0;
        $(function(){ 
              $("#ss").click( 
                function (){
                

                  $("input[name='fav']").prop("checked","checked");  

//这个地方只能用prop实现多次点击切换全选和全不选的效果,用attr的话不会多次实现。因为attr不会记录当前checkbox的选中状态,所以这个地方只能使用prop

                  if(i==1){ 
                   
                       $("input[name='fav']").prop("checked",false);  
                    
                  }
                  i++;
                  if(i>1){
                    
                    i=0;
                  } 
                  
                } 
              );  
           }
      );
      </script>
   </head>
  
   <body>
       <input type="checkbox"  name="fav"  value="ds"/>读书<br/>
        <input type="checkbox"  name="fav"  value="ds"/>思考<br/>
        <input type="checkbox"  name="fav"  value="ds"/>思考<br/>
        <input type="checkbox"  name="fav"  value="ds"/>睡觉<br/>
       <button id="ss">全选</button>
   </body> 

</html>



  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以通过以下方式实现HTML: ```html <!-- 假设你有一组 checkbox,它们的 class 都是 "checkbox-item" --> <input type="checkbox" id="check-all" /> 全选/全不选 <input type="checkbox" class="checkbox-item" /> <input type="checkbox" class="checkbox-item" /> <input type="checkbox" class="checkbox-item" /> <!-- 其他 checkbox 组成的列表 --> ``` JS: ```javascript var checkAll = document.getElementById('check-all'); var checkBoxItems = document.querySelectorAll('.checkbox-item'); checkAll.addEventListener('change', function() { var isChecked = checkAll.checked; for (var i = 0; i < checkBoxItems.length; i++) { checkBoxItems[i].checked = isChecked; } }); for (var i = 0; i < checkBoxItems.length; i++) { checkBoxItems[i].addEventListener('change', function() { var isAllChecked = true; for (var j = 0; j < checkBoxItems.length; j++) { if (!checkBoxItems[j].checked) { isAllChecked = false; break; } } checkAll.checked = isAllChecked; }); } ``` 解释一下,首先获取全选/全不选按钮和所有的 checkbox,然后给全选/全不选按钮添加 change 事件监听器,在事件处理函数中,将所有的 checkbox 的 checked 属性值设为当前全选/全不选按钮的 checked 属性值。 同时,给每个 checkbox 添加 change 事件监听器,在事件处理函数中,先遍历所有 checkbox 确定是否有未选中的,如果有就不是全选状态,否则就是全选状态,将全选/全不选按钮的 checked 属性值设为对应的状态即可。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kevin_feng老师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值