快捷導(dǎo)航

jQuery實(shí)現(xiàn)checkbox全選功能完整實(shí)例

更新時間：2018年07月12日 11:52:42 作者：LutosX

這篇文章主要介紹了jQuery實(shí)現(xiàn)checkbox全選功能,結(jié)合完整實(shí)例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)checkbox全選功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>m.fzitv.net jQuery實(shí)現(xiàn)checkBox全選</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
  /*
  *統(tǒng)一設(shè)置所有條目的
  */
  function setItemCheckBox(flag) {
    $(":checkbox[name=checkboxBtn]").prop("checked",flag);
  }
  $(function () {
    //點(diǎn)擊全選
    $("#selectAll").click(function(){
      //1.獲取全選的狀態(tài)
      var flag = this.checked;//獲取全選的狀態(tài)
      if(flag){
        $(this).prop("checked", true);
      }else{
        $(this).prop("checked", false);
      }
      //var flag = $(":checkbox[name=selectAll]").attr("checked");//jquery-1.5.1的用法
      //2.讓所有條目的復(fù)選框與全選的狀態(tài)同步
      //alert(flag);
      setItemCheckBox(flag);
    });
    //給所有復(fù)選框添加事件
    $(":checkbox[name=checkboxBtn]").click(function(){
      var flagV = this.checked;
      if(flagV){
        $(this).prop("checked", true);
      }else{
        $(this).prop("checked", false);
      }
      //獲取所有復(fù)選框的個數(shù)
      var len = $(":checkbox[name=checkboxBtn]").length;
      //獲取所有被選中的復(fù)選框的個數(shù)
      var checked_len = $(":checkbox[name=checkboxBtn]:checked").length;
      if(len == checked_len){
        //alert("全選中了");
        $("#selectAll").prop("checked",true);
      } else if(checked_len == 0) {
        $("#selectAll").prop("checked",false);
      } else {
        $("#selectAll").prop("checked",false);
      }
    });
  });
</script>
<body>
<div id="songList">
  <input type="checkbox" value="歌曲1" name="checkboxBtn"/>歌曲1<br />
  <input type="checkbox" value="歌曲2" name="checkboxBtn"/>歌曲2<br />
  <input type="checkbox" value="歌曲3" name="checkboxBtn"/>歌曲3<br />
</div>
<input type="checkbox" id="selectAll" name="selectAllBtn"/>全選<br />
</body>
</html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun運(yùn)行測試效果如下：