zoukankan      html  css  js  c++  java
  • Jqurey 全选和全不选

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

    用attr 会有个问题 全选只能使用一次  第一次运行,点select all那个checkbox,可以全选,再点一次,也可以全部取消。但是,之后不管怎样点击,都没有用了……

    百度了一下 用prop 替换使用attr 就可以勒

    区别  http://www.cnblogs.com/zhwl/p/3520162.html

    <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"]').prop("checked",this.checked); 
                });
                var $subBox = $("input[name='subBox']");
                $subBox.click(function(){
                    $("#checkAll").prop("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>
  • 相关阅读:
    [面试没答上的问题1]http请求,请求头和响应头都有什么信息?
    模拟进度条发现的彩蛋
    实现JavaScript forEach
    JavaScript实现动画效果
    Contents Of My Blogs
    阅读笔记-拍出好照片的30个构图基本功
    阅读笔记-李鸿章传
    阅读笔记-人性的弱点
    阅读笔记-XWord:未来进化
    阅读笔记-活法
  • 原文地址:https://www.cnblogs.com/acgk/p/4568312.html
Copyright © 2011-2022 走看看