• checkbox选中与取消选择


     先上代码

    <form>
        你爱好的运动是?<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="CheckAll" value="全选" />
        <input type="button" id="CheckNo" value="全不选" />
        <input type="button" id="CheckRev" value="反选" />
        </form>
    

      想要实现的是全选,全不选和反选三种效果,其中需要特别注意的是全选按钮这里

    <script>
        $(function(){
            $("#CheckAll").click(function(){
                $("input:checkbox").prop("checked","checked");
            });
            $("#CheckNo").click(function(){
                $("input:checkbox").removeAttr("checked");
            });
            $("#CheckRev").click(function(){
                $("input:checkbox").each(function(){
                    this.checked=!this.checked;
                });
            });
        });
    </script>
    

      请注意,现在使用的是prop(),如果使用attr(),那么就会出现下面这种情况:

    选择“全选”按钮后,正常;点击“全不选”,正常;当这个时候再去点击“全选”按钮时,发现代码那里的“checked”=checked,但是页面上没有显示出来;

    使用prop()方法后,可以解决此问题;

    。。。。没有测浏览器的兼容。。。。

  • 相关阅读:
    POJ 2068 Nim(博弈论)
    POJ 2311 Cutting Game (Multi-Nim)
    CodeForces 144B Meeting
    ZUFEOJ 2147 07染色带谜题
    CodeForces 779E Bitwise Formula
    CodeForces 779D String Game
    CodeForces 779C Dishonest Sellers
    CodeForces 779B Weird Rounding
    CodeForces 779A Pupils Redistribution
    HRBUST 1313 火影忍者之~静音
  • 原文地址:https://www.cnblogs.com/new-dream-new-hope/p/5285474.html
Copyright © 2020-2023  润新知