jquery 实现复选框的全选操作实例代码

jquery 实现复选框的全选操作实例代码

最近做了个需求，需要实现列表复选框的全选/取消全选操作，由于之前对这块不是很了解，所以从网上查了一些资料，虽然有各种实现方法，但没找到直接可以套用的。自己琢磨了下，把功能实现，整理如下。

实现细节如有可改进的地方，不吝赐教。

首先是html部分的代码，这里有一个表格，表格里面有一些选项：

<div id="list"> 
  <table> 
    <tr><td>选项1<input type="checkbox" name="group" value="1"/></tr> 
    <tr><td>选项2<input type="checkbox" name="group" value="2"/></tr> 
    <tr><td>选项3<input type="checkbox" name="group" value="3"/></tr> 
  </table> 
</div>
全选<input type="checkbox" id="all"/>

接下来是jquery：

<script> 
$(document).ready(function () { 
  //全选或全不选 
  $("#all").click(function () { 
    if (this.checked) { 
      $("#list :checkbox").attr("checked", true); 
    } else { 
      $("#list :checkbox").attr("checked", false); 
    } 
  }); 
  //设置全选复选框 
  $("#list :checkbox").click(function () { 
    allchk(); 
  }); 
  function allchk() { 
    var chknum = $("#list :checkbox").size();//选项总个数 
    var chk = 0; 
    $("#list :checkbox").each(function () { 
      if ($(this).attr("checked")) { 
        chk++; 
      } 
    }); 
    if (chknum == chk) {//全选 
      $("#all").attr("checked", true); 
    } else {//不全选 
      $("#all").attr("checked", false); 
    } 
  } 
  //显示时执行一次 
  allchk(); 
}); 
</script>

当全选框被点击时，判断选中状态，如果是选中，则为所有选项的复选框设置选中属性；如果是取消选中，则为所有选项的复选框取消选中属性。

同时，为每个选项复选框添加判断，当所有的选项复选框都选中时，全选框自动选中；否则，全选框取消选中。这里通过计数来比较（选项的数量和选中的选项数量），通过each方法来进行遍历。

最后，在显示时执行一次，这是确保如果初始状态就是所有选项都选中的状态，要保证全选框也是选中的状态。

参考：jquery中checkbox使用方法简单实例演示

# jquery # 实现复选框的全选操作 # 复选框 # JQuery实现列表中复选框全选反选功能封装(推荐) # jQuery对checkbox 复选框的全选全不选反选的操作 # js与jQuery实现checkbox复选框全选/全不选的方法 # 基于jquery实现复选框全选 # 反选 # 全不选等功能 # jQuery实现按钮的点击全选/反选单选框/复选框文本框表单验证 # 基于jQuery实现复选框的全选全不选反选功能 # jQuery实现复选框全选/取消全选/反选及获得选择的值 # jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码 # jquery复选框全选/取消示例 # 方便实用的jQuery checkbox复选框全选功能简单实例 # jquery复选框CHECKBOX全选、反选 # JQUERY复选框CHECKBOX全选 # 取消全选 # 全选 # 则为 # 这是 # 不吝赐教 # 如有 # 遍历 # 不是很 # 这块 # 方法来 # 但没 # 有一个 # 不选 # 网上 # lt # xhtml # div # list # id # gt

返回目录在线咨询

上一篇：山东物联网网站制作公司,2025山东高职物联网技术有技能大赛吗？
下一篇：云指h5建站是否提供数据分析功能帮助了解访客行为？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jquery 实现复选框的全选操作实例代码

您的项目需求