zoukankan      html  css  js  c++  java
  • jQuery 复选框全选反选

     <script type="text/javascript">
    $(
    function(){
    //全选
    $("#CheckedAll").click(function(){
    $(
    '[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);
    });

    //输出值
    $("#send").click(function(){
    var str="你选中的是:\r\n";
    $(
    '[name=items]:checkbox:checked').each(function(){
    str
    +=$(this).val()+"\r\n";
    })
    alert(str);
    });
    });
    </script>
    </head>

    <body>
    <form method="post" action="">
    <b>你爱好的运动是?</b><br/>
    <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>

  • 相关阅读:
    jquery判断元素是否可见隐藏
    jQuery的replaceWith()函数用法详解
    前端工作面试问题
    Windows下安装sass和compass失败的解决办法
    马尾图案之canvas的translate、scale、rotate的方法详解
    boost bimap
    boost multi index
    boost regex expression
    boost format
    boost lexical_cast
  • 原文地址:https://www.cnblogs.com/linjiqin/p/2177885.html
Copyright © 2011-2022 走看看