zoukankan      html  css  js  c++  java
  • jquery checkbox选中状态

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
     <!--   引入jQuery -->
     <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
     <script type="text/javascript">
    $(function(){
         //全选
         $("#CheckedAll").click(function(){
                //所有checkbox跟着全选的checkbox走。
                $('[name=items]:checkbox').attr("checked", this.checked );
         });
         $('[name=items]:checkbox').click(function(){
                    //定义一个临时变量,避免重复使用同一个选择器选择页面中的元素,提升程序效率。
                    var $tmp=$('[name=items]:checkbox');
                    //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
                    $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);
    
                /*
                    //一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。
                    $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);
                */
         });
          //输出值
        $("#send").click(function(){
            var str="你选中的是:
    ";
            $('[name=items]:checkbox:checked').each(function(){
                str+=$(this).val()+"
    ";
            })
            alert(str);
        });
    });
      </script>
    </head>
    <body>
    
    <form method="post" action="">
       你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
        <input type="button" id="send" value="提 交"/> 
    </form>
    
    </body>
    </html>
     

  • 相关阅读:
    QPS、TPS、RT、并发数、吞吐量理解和性能优化深入思考
    从开源协议到谷歌禁用华为、Docker实体清单事件
    如何画好架构图?
    使用委托的异步方法
    里氏替换原则(转)
    HTTP协议详解(转)
    httpApplication事件和asp.net生命周期(整理)
    WebDev.WebServer.exe
    正则表达式的3种匹配模式
    Code First实体与数据表之间的映射关系
  • 原文地址:https://www.cnblogs.com/a757956132/p/4994878.html
Copyright © 2011-2022 走看看