1. 程式人生 > >radio設定屬性checked屬性不生效

radio設定屬性checked屬性不生效

在jquery中,通過點選事件設定radio的checked屬性不生效。

1、html

            <div id="weChatSignIn">
                <input type="radio" name="nameList" value="微信簽到使用者抽獎" id='wechat'/>微信簽到使用者抽獎
            </div>
            <!-- 在input外面新增div,是為了設定display:none屬性 -->
            <div id='importNameList'>
                <input type="radio" name="nameList" value="匯入名單參與抽獎" id="import" />匯入名單參與抽獎
            </div>
2、css
form input[type='radio']{
    margin-left: 140px;
}
3、js
    // 當選擇“微信使用者簽到抽獎”時,觸發
    $('#weChatSignIn').click(function(){
            $('#wechat').attr('checked','checked');
    });

    // 選擇“匯入名單抽獎”觸發
    $('#importNameList').click(function(){  
        $('#import').attr('checked','checked');
    });
4、效果:無論怎麼點選,都是第一個radio選中


5、這裡的主要原因是用attr()函式來設定元素的屬性,如果換成prop()函式來設定屬性就正常了,如下面所示:

    // 當選擇“微信使用者簽到抽獎”時,觸發
    $('#weChatSignIn').click(function(){
            $('#wechat').prop('checked','checked');
    });

    // 選擇“匯入名單抽獎”觸發
    $('#importNameList').click(function(){  
        $('#import').prop('checked','checked');
    });
6、attr()和prop()的區別

    attr()方法主要是用來處理自定義的DOM屬性;

7、什麼時候使用它們呢

      具有true和false屬性的屬性,就使用prop(),比如checked    selected   disabled等,其他的使用attr()