• prop解决一个checkbox选中后再次选中失效的问题


    //问题点

    初始状态复选框没有全选,

    点击全选按钮调用checkAll方法,

    实现了全选,

    然后点击全不选按钮,

    实现了全不选,

    然后再次点击全选按钮,

    结果却木有全选,

    再反复点击木有任何反应。

    demo:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-1.11.3.min.js"></script>
        <script>
            $(function () {
                $("#allchoose").click(function () {
                        $(":checkbox").prop("checked",true);
                })
                $("#allnochoose").click(function () {
                    if ($(":checkbox").is(":checked")){
                        $(":checkbox").attr("checked",false);
                    }
                })
                $("#choose").click(function () {
                    $(":checkbox").each(function () {
                        if($(this).is(":checked")){
                            $(this).attr("checked",false);
                        }else{
                            $(this).prop("checked",true);
                        }
                    });
                });
                $("#submit").click(function () {
                    var s=[];
                    $(":checkbox").each(function () {
                        if($(this).is(":checked")){
                            var temp=$(this).val();
                            s.push(temp);//注意这里不能使方括号
                        }
                    })
                    var xx=s.join();//默认中间加逗号
                    console.log("你喜欢的运动有:"+xx);
                })
            })
        </script>
    </head>
    <body>
    <input type="checkbox" value="乒乓球" id="">乒乓球
    <input type="checkbox" value="羽毛球" id="">羽毛球
    <input type="checkbox" value="足球" id="">足球
    <input type="checkbox" value="篮球" id="">篮球
    <input type="checkbox" value="排球" id="">排球<br>
    <input type="button" value="全选" id="allchoose">
    <input type="button" value="全不选" id="allnochoose">
    <input type="button" value="反选" id="choose">
    <input type="submit" value="提交" id="submit">
    </body>
    </html>
  • 相关阅读:
    大哥带我走渗透8--CSRF的应用
    大哥带我走渗透7----解析漏洞
    大哥带我走渗透6(下)---文件上传
    视频学习XSS
    大哥带我走渗透5--南方数据
    大哥带我走渗透4(中)----oracle报错注入
    大哥带我走渗透ii--时间盲注,布尔盲注
    SQL语言基础和数据库操作
    less-7
    less-6
  • 原文地址:https://www.cnblogs.com/lwj820876312/p/7117739.html
Copyright © 2020-2023  润新知