js不能控制input标签的checked属性

在html5之前就已经出现input的checked的属性，所以也算是经常使用的属性。

但是大部分情况下可能都只是为了在页面加载的时候先显示一个选择而这样使用（<input type="radio" checked>）。

如果想用js来控制它的选择效果，比如我点击文字，input标签也改变，第一反应都是改变它属性的值，我这里用jquery写的，版本为1.8.3

<p>
            <a href="javascript:;"><input type="radio" name="pay">支付宝</a>
            <a href="javascript:;"><input type="radio" name="pay">微信</a>
        </p>

$('a').click(function() {
                $(this).children('input').attr('checked', true);
                $(this).siblings().children('input').attr('checked', false);
            })

如果这样做了，会发现页面上第一次有效果，继续切换点的话，会发现代码发生改变，但是网页效果没有出现或者部分出现

网上搜了一下，很多都说用prop和removeAttr这两个方法

$('a').click(function() {
                $(this).children('input').prop('checked', true);
                // $(this).siblings().children('input').removeAttr('checked'); 试验发现这行无用
            })

ok，实现了想要的功能，因为radio设置了name属性，所以相同name值只会存在一个选择，但是发现选择的标签里面并没有checked属性，确认一下是否生效，在input标签增加value属性

<p>
            <a href="javascript:;"><input type="radio" name="pay" value="1">支付宝</a>
            <a href="javascript:;"><input type="radio" name="pay" value="2">微信</a>
        </p>

获取value值

$('a').click(function() {

$(this).children('input').prop('checked', true); console.log($('a input:radio:checked').val()); }

发现可以输出相应的value值，说明选择效果可以，那么问题来了，为什么需要用prop方法，而不能用attr呢？

网上搜了一下，简单表达就是标签本来就有的属性（如checked），需要用prop，而自己添加的属性（如value），可以用attr。

感谢大家观看和交流，以后会继续发表一些文章，我是冷风

js不能控制input标签的checked属性

猜你喜欢