通过点击事件设置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属性;

   prop()方法主要是用来处理本身就带有的固有属性,W3C标准里面说明的属性,或者在IDE里面能够智能提示的属性,都是固     有属性,可以结合这篇文章一起看:http://blog.csdn.net/tangxiujiang/article/details/76735188

7、什么时候使用它们呢

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

posted @ 2020-04-16 22:12  蔚小蓝的蓝小天  阅读(1467)  评论(0编辑  收藏  举报