欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-26 12:24:22
废话不多说了,直接给大家贴代码了,具体代码如下所示: ...

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

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>jquery实现checkbox全选、全不选</title> 
<script src="http://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>   
<script type="text/javascript"> 
    $(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("没有选中") 
        } 
      }); 
    }); 
  </script> 
</head> 
<body> 
  <div> 
    <input id="checkall" type="checkbox" />全选 
    <input name="subbox" type="checkbox" value="1" />选项1 
    <input name="subbox" type="checkbox" value="2"/>选项2 
    <input name="subbox" type="checkbox" value="3"/>选项3 
    <input name="subbox" type="checkbox" value="4"/>选项4 
    <input type="button" id="butt" value="检查是否选中"/> 
  </div> 
</body> 
</html> 

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,问题得解。