一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 17:22:57 编辑:袖梨 来源:一聚教程网

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

 代码如下 复制代码
 
 
 
 
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全选、全不选功能,希望对大家有所帮助!

热门栏目