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>
  • 相关阅读:
    Apache 安装 静态编译 动态编译
    Vlan 间路由的方法
    一个无限加载瀑布流jquery实现
    用ajax查询天气
    一个简单移动页面ionic打包成app
    时隔一年再读到the star
    轮播图原生js实现和jquery实现和js面向对象方式实现
    js实现一个简单计算器
    纯css3图片旋转展示
    自定义按钮~自适应布局~常见bug
  • 原文地址:https://www.cnblogs.com/acgk/p/4568312.html
Copyright © 2011-2022 走看看