jquery中checkbox选中的问题之prop&attr惹的祸

一个网上很多的例子如下：

        Meta test
        
        Box").attr(        <span class="hljs-comment"&gt;// 全不选
        $(<span class="hljs-string"&gt;"#btnCheckNone").bind(<span class="hljs-string"&gt;"click",<span class="hljs-literal"&gt;false);
        });

        <span class="hljs-comment"&gt;// 反选
        $(<span class="hljs-string"&gt;"#btnCheckReverse").bind(<span class="hljs-string"&gt;"click",<span class="hljs-function"&gt;<span class="hljs-keyword"&gt;function <span class="hljs-params"&gt;() {
            $(<span class="hljs-string"&gt;"[name = chkItem]:check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>").each(<span class="hljs-function"&gt;<span class="hljs-keyword"&gt;function <span class="hljs-params"&gt;() {
                $(<span class="hljs-keyword"&gt;this).attr(<span class="hljs-string"&gt;"checked",!$(<span class="hljs-keyword"&gt;this).attr(<span class="hljs-string"&gt;"checked"));
            });
        });

        <span class="hljs-comment"&gt;// 全不选
        $(<span class="hljs-string"&gt;"#btnSubmit").bind(<span class="hljs-string"&gt;"click",<span class="hljs-function"&gt;<span class="hljs-keyword"&gt;function <span class="hljs-params"&gt;() {
            <span class="hljs-keyword"&gt;var result = <span class="hljs-keyword"&gt;new <span class="hljs-built_in"&gt;Array();
            $(<span class="hljs-string"&gt;"[name = chkItem]:check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>").each(<span class="hljs-function"&gt;<span class="hljs-keyword"&gt;function <span class="hljs-params"&gt;() {
                <span class="hljs-keyword"&gt;if ($(<span class="hljs-keyword"&gt;this).is(<span class="hljs-string"&gt;":checked")) {
                    result.push($(<span class="hljs-keyword"&gt;this).attr(<span class="hljs-string"&gt;"value"));
                }
            });

            alert(result.join(<span class="hljs-string"&gt;","));
        });
    });
<span class="hljs-tag"&gt;</<span class="hljs-title"&gt;script>

</head>
<body>
<div>
<input name="chkItem" type="checkBox" value="今日话题" />今日话题
<input name="chkItem" type="checkBox" value="视觉焦点" />视觉焦点
<input name="chkItem" type="checkBox" value="财经" />财经
<input name="chkItem" type="checkBox" value="汽车" />汽车
<input name="chkItem" type="checkBox" value="科技" />科技
<input name="chkItem" type="checkBox" value="房产" />房产
<input name="chkItem" type="checkBox" value="旅游" />旅游
</div>
<div>
<input id="btnCheckAll" type="button" value="全选" />
<input id="btnCheckNone" type="button" value="全不选" />
<input id="btnCheckReverse" type="button" value="反选" />
<input id="btnSubmit" type="button" value="提交" />
</div>
</body>
</html>

运行后，在火狐下面发现一个问题百思不得其解
问题描述：第一次点全选可以，然后点击全不选，接着再点击全选、全不选、反选就没了反应，后来用其他浏览器发下可以，所以感觉是兼容性的问题，后来查阅资料发现果然是的，参考地址
 解决方法：将attr换为prop即可，经过验证各个浏览器都是好的，官网说明是在1.6之后建议用prop，在此记录以备后用
下为效果图
这里写<a href= 图片描述">

原文链接：https://www.f2er.com/jquery/403219.html

jquery中checkbox选中的问题之prop&attr惹的祸

猜你在找的jQuery相关文章