您的位置：首页 > Web前端 > JQuery

jQuery 实现单选按钮（radio）勾选和取消，使用prop()代替attr() 踩坑博客

2017-11-01 11:58 791 查看

欢迎来到Altaba的博客 2017年11月1日

很多时候，我们需要原因js脚本去操控一排单选按钮，获取后台数据显示当前项的某个设置值，通过单选框显示，进而还能够通过修改勾选单选按钮去修改这个项的值，由于整个项目前端是通过jQuery实现，果断想到使用attr（）方法去实现修改单选按钮checked属性，谁知道遇到一系列无法想象的奇怪问题

比如：手动修改单选按钮，后无法通过jQuery的attr（）清除，想办法清除完了后面又无法通过脚本重新勾选单选按钮，就这样测试花了我一下午时间，baidu google一下午都是说用attr（）去实现，故没怀疑这个方法。

后面通过查阅资料发现：jquery中同时提供了attr()与prop()方法对属性进行获取，但是还是有一定的区别

原文这样写的：

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6 , the .attr() method sometimes took property values into account when retrieving some attributes, which could
cause inconsistent behavior. As of jQuery 1.6 , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6 , these properties were retrievable with
the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

大体上的意思是：在jquery1.6之后，对于checked，selected等进行状态改变时，需要使用的是prop()而不是attr()，判断到底单选框是否选中了，这个也同样是使用prop().！！！

于是修改所有attr()为prop()后完美实现，果然框架的吭能把程序员逼疯

下面是demo代码，欢迎大家复制测试

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<input type="radio" name="aaa" value="小米" tag="0"><br>
<input type="radio" name="aaa" value="小是" tag="0"><br>
<input type="radio" name="aaa" value="小谁" tag="0"><br>
<input type="radio" name="aaa" value="小发" tag="0"><br>
<input type="radio" name="aaa" value="小哦" tag="0">

<button class="btn1">点我除去选中项</button>
<button class="btn2">点我选中第二个</button>
<button class="btn3">点我选中第三个</button>
<button class="btn4">点我选中第四个</button>
<button class="btn5">点我选中第五个</button>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
/*//解决选中的单选框无法取消问题
$(":radio").click(
function(){
var nm=$(this).attr("name");
$(":radio[name="+nm+"]:not(:checked)").attr("tag",0);
if($(this).attr("tag")==1){
$(this).attr("checked",false);
$(this).attr("tag",0);
} else{
$(this).attr("tag",1);
}
}
);*/

function de() {
//错误示范，均会出现什么各种问题
/*$.each($('input:radio'),function(i,v){
$(v).attr('checked', false);
$(v).removeAttr('checked');
//v.checked = false;
//v.removeAttribute("checked");
})*/

//$("input[name=aaa]").prop("checked",false);
$('input:checked').prop('checked', false);
//$("input[name=aaa]").removeAttr("checked")
}

$('.btn1').click(function () {
de()
})

$('.btn2').click(function () {
//de();
$('input:radio').eq(1).prop('checked', true);

})

$('.btn3').click(function () {
//de();
$('input:radio').eq(2).prop('checked', true);

})
$('.btn4').click(function () {
//de();
$('input:radio').eq(3).prop('checked', true);

})
$('.btn5').click(function () {
//de();
$('input:radio').eq(4).prop('checked', true);

})

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端 jquery JS

相关文章推荐

新的分享

章节导航