radio设置属性checked属性不生效

「爱情、让人受尽委屈。」 2022-06-04 03:16 460阅读 0赞

在jquery中，通过点击事件设置radio的checked属性不生效。

1、html

<div id="weChatSignIn">
                    <input type="radio" name="nameList" value="微信签到用户抽奖" id='wechat'/>微信签到用户抽奖
                </div>
                
                <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选中

![Center][]

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][http_blog.csdn.net_tangxiujiang_article_details_76735188]

7、什么时候使用它们呢

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

[Center]: /images/20220604/22b12c961da04f43b2fce24da19a9c5f.png
[http_blog.csdn.net_tangxiujiang_article_details_76735188]: http://blog.csdn.net/tangxiujiang/article/details/76735188