jQuery實(shí)現(xiàn)CheckBox全選、全不選功能

發(fā)布時(shí)間：2020-09-04 18:38:49 來(lái)源：腳本之家閱讀：130 作者：yaoyyl 欄目：web開(kāi)發(fā)

廢話不多說(shuō)了，直接給大家貼代碼了，具體代碼如下所示：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery實(shí)現(xiàn)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() 遍歷函數(shù) 
          alert(this.value);             
        });  
        if(arrChk.length==0){ 
          alert("沒(méi)有選中") 
        } 
      }); 
    }); 
  </script> 
</head> 
<body> 
  <div> 
    <input id="checkAll" type="checkbox" />全選 
    <input name="subBox" type="checkbox" value="1" />選項(xiàng)1 
    <input name="subBox" type="checkbox" value="2"/>選項(xiàng)2 
    <input name="subBox" type="checkbox" value="3"/>選項(xiàng)3 
    <input name="subBox" type="checkbox" value="4"/>選項(xiàng)4 
    <input type="button" id="butt" value="檢查是否選中"/> 
  </div> 
</body> 
</html>

jQuery版本問(wèn)題

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

而jQuery的版本用的是2.1.1，這就是存在一個(gè)兼容性和穩(wěn)定性問(wèn)題。

jQuery API明確說(shuō)明，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，問(wèn)題得解。

相關(guān)閱讀：

jQuery操作復(fù)選框(CheckBox)的取值賦值實(shí)現(xiàn)代碼

jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作

Jquery EasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)CheckBox全選、全不選功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

jQuery實(shí)現(xiàn)CheckBox全選、全不選功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

jQuery實(shí)現(xiàn)CheckBox全選、全不選功能