zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    GIT和SVN之间的五个基本区别
    nolock的使用
    Net线程足迹 传递参数至线程
    .NET中的三种Timer的区别和用法(转)
    探索并发编程(六)------Java多线程性能优化
    探索并发编程(七)------分布式环境中并发问题
    Lock与synchronized 的区别
    常用EXE文件反编译工具
    Socket原理
    开源的力量(随时更新)
  • 原文地址:https://www.cnblogs.com/lwj820876312/p/7117739.html
Copyright © 2011-2022 走看看