checkbox jquery 全选反选

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_34072857

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量46

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://segmentfault.com/a/1190000013403838

版权

原始

<!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>

weixin_34072857

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox jquery 全选反选

原始<!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/...
复制链接

扫一扫