jQuery实现CheckBox全选、全不选功能

作者：袖梨 2022-06-25

废话不多说了，直接给大家贴代码了，具体代码如下所示：

代码如下

复制代码

 
 
 
 
jQuery实现CheckBox全选、全不选 
   
 
    $(function() { 
    $(':checkbox').click(function(evt){ 
      // 阻止冒泡 
      evt.stopPropagation(); 
    }); 
      //判断是否全选 
      $("#checkAll").click(function() { 
        $('input[name="subBox"]').prop("checked",this.checked);  
      }); 
      var $subBox = $("input[name='subBox']"); 
      $subBox.click(function(){ 
        //alert($subBox.length); 
        //alert($("input['subBox']:checked").length); 
        $("#checkAll").prop("checked",$subBox.length == 
        $("input[name='subBox']:checked").length ? true : false); 
      }); 
      //用于检查是否选中,选中的话提示值 
      $("#butt").click(function (){ 
        //$('input[name="subBox"]').prop("checked",this.checked);  
        var arrChk=$("input[name='subBox']:checked"); 
        $(arrChk).each(function(){  //each() 遍历函数 
          alert(this.value);             
        });  
        if(arrChk.length==0){ 
          alert("没有选中") 
        } 
      }); 
    }); 
   
 
 
   
    全选 
    选项1 
    选项2 
    选项3 
    选项4

jQuery版本问题

原本操作属性用的是$("XXX").attr("attrName");

而jQuery的版本用的是2.1.1，这就是存在一个兼容性和稳定性问题。

jQuery API明确说明，1.6+的jQuery要用prop，尤其是checkBox的checked的属性的判断，

即使用代码如下:

代码如下	复制代码
$("input[name='checkbox']").prop("checked"); $("input[name='checkbox']").prop("disabled", false); $("input[name='checkbox']").prop("checked", true);

于是乎将attr改为prop，问题得解。

以上所述是小编给大家介绍的jQuery实现CheckBox全选、全不选功能，希望对大家有所帮助！