jquery中checkbox選中的問題之prop&attr惹的禍

阿新 • • 發佈：2019-02-16

一個網上很多的例子如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title 
>test</title>
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript">
        $(function () {
            // 全選
            $("#btnCheckAll").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked" 
, true);
            });

            // 全不選
            $("#btnCheckNone").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", false);
            });

            // 反選
            $("#btnCheckReverse").bind("click", function () {
                $("[name = chkItem]:checkbox" 
).each(function () {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });

            // 全不選
            $("#btnSubmit").bind("click", function () {
                var result = new Array();
                $("[name = chkItem]:checkbox").each(function () {
                    if ($(this).is(":checked")) {
                        result.push($(this).attr("value"));
                    }
                });

                alert(result.join(","));
            });
        });
    </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>

執行後，在火狐下面發現一個問題百思不得其解
問題描述：第一次點全選可以，然後點選全不選，接著再點選全選、全不選、反選就沒了反應，後來用其他瀏覽器發下可以，所以感覺是相容性的問題，後來查閱資料發現果然是的，參考地址http://jquery.com/
解決方法：將attr換為prop即可，經過驗證各個瀏覽器都是好的，官網說明是在1.6之後建議用prop，在此記錄以備後用
下為效果圖
這裡寫圖片描述

jquery中checkbox選中的問題之prop&attr惹的禍

jquery中checkbox選中的問題之prop&attr惹的禍

jquery中checkbox選中取消後，不能再被jquery選中的問題！

jquery中哪些屬性應該用attr()訪問，哪些應該用prop()訪問？

jQuery中使用attribute，prop獲取，設置input的checked值【轉】

jQuery中選擇器之子元素篩選器

extjs中checkbox選中與不選中設定

jquery中如何選中指定value值的選項

jQuery中checkbox的click方法中判斷checked屬性問題

jQuery獲取checkbox選中項等操作及注意事項

jquery中prop()方法和attr()方法的區別淺析

關於Jquery中radio的屬性設置，是attr,還是prop問題

JQuery中Attr與Prop的區別

jQuery獲取動態表格中checkbox被選中一行的屬性數據

jquery中prop()方法和attr()方法的區別

jquery中attr和prop的區別

Jquery中attr()與prop()的區別

【七】jquery之屬性attr、 removeAttr、prop

Jquery中.attr與.prop的區別

jQuery中的prop（）和attr（）的區別

總結Jquery中獲取自定義屬性使用.attr()和.data()以及.prop()的區別

jquery中checkbox選中的問題之prop&attr惹的禍

相關推薦