checkbox jquery 全选反选

2024年1月16日 106次阅读 来源: 渣渣辉

原始

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery完成CheckBox全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>  <script type="text/javascript">
    $(function() {
      $("#checkAll").click(function() {
        $('input[name="subBox"]').attr("checked",this.checked); 
      });
      var $subBox = $("input[name='subBox']");
      $subBox.click(function(){
        $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
      });
    });
  </script>
  
</head>
<body>
  <div>
    <input id="checkAll" type="checkbox" />全选
    <input name="subBox" type="checkbox" />项1
    <input name="subBox" type="checkbox" />项2
    <input name="subBox" type="checkbox" />项3
    <input name="subBox" type="checkbox" />项4
  </div>
</body>

革新

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div><input name="checkbox-all" type="checkbox"/>全选</div>

<ul>
    <li><input name="checkbox-item" type="checkbox"/>1</li>
    <li><input name="checkbox-item" type="checkbox"/>2</li>
    <li><input name="checkbox-item" type="checkbox"/>3</li>
    <li><input name="checkbox-item" type="checkbox"/>4</li>
</ul>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
    $(function(){
        var checkboxAll = $("input[name='checkbox-all']");
        var checkboxItem = $("input[name='checkbox-item']");
        checkboxAll.change(function(){
            checkboxItem.attr("checked",this.checked)
        })
        checkboxItem.change(function(){
        //只能在里面声明，由于change，才会变化
            var checkboxItemChecked = $("input[name='checkbox-item']:checked").length;
            if(checkboxItem.length == checkboxItemChecked){
                checkboxAll.attr("checked",true)
            }else{
                checkboxAll.attr("checked",false)
            }
        })
    })
</script>
    原文作者：渣渣辉
    原文地址: https://segmentfault.com/a/1190000013403838
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞