jQuery中prop的使用

最新推荐文章于 2023-06-26 10:30:53 发布

xuxinwen32

最新推荐文章于 2023-06-26 10:30:53 发布

阅读量2k

点赞数

分类专栏：前端文章标签： jQuery中prop复选框的使用

本文链接：https://blog.csdn.net/xuxinwen32/article/details/78669626

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

最近在工作中使用jquery操作checkbox进行全选、反选:
$('input[attr-val="sel"]').attr('checked', false);
调试的时候刚开始可以正常勾选和取消，但当再去勾选的时候，复选框的属性checkbox值变为"checked"，但是却不显示勾选。后来去jQuery帮助中心看了相应的api文档和度娘了一下，终于找到问题了，
原来是jQuery版本问题，我用的jQuery版本是2.1.4,这就存在兼容性问题，jQuery api中已经明确说明在1.6版本以上要用prop属性，所以把自己的一个小测试搬过来，希望对大家有所帮助；
$('input[attr-val="sel"]').prop("checked");
$('input[attr-val="sel"]').prop("disabled", false);
$('input[attr-val="sel"]').prop("checked", true);

测试代码如下：

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body οnclick="selectedall()">
<form action="" id="form">
<input type="checkbox" id='totalsel' attr-val='totalsel' value="全部" />全部<br />
<input type="checkbox" attr-val='sel' value="保龄球" />保龄球
<input type="checkbox" attr-val='sel' value="台球" />台球
<input type="checkbox" attr-val='sel' value="乒乓球" />乒乓球<br /><br />
<input type="button" value="提交" />
</form>
<div class="statistics">总共有 <span class="statisticsItem">0</span> 条数据</div>

</body>

<script>

$(function(){
$("#totalsel").on('click', function(){
if($("#totalsel").prop('checked')){ //如果attr-val='totalsel'为选中的状态那么就全选，否则就取消全选
$('input[attr-val="sel"]').each(function(){
$('input[attr-val="sel"]').prop('checked', true);
})
}else{
$('input[attr-val="sel"]').each(function(){
$('input[attr-val="sel"]').prop('checked', false);
})
}
})

/* $("#totalsel").on('click', function(){
var checkedTru = $(this).prop('checked', true);
if(checkedTru){
$('input[attr-val="sel"]').each(function(){
$('input[attr-val="sel"]').attr('checked', true); 使用attr判断勾选和取消错误；
})
}else {
$('input[attr-val="sel"]').each(function(){
$('input[attr-val="sel"]').attr('checked', false);
})
}
})*/
})

function selectedall(){
var arrConcat = [];
$("#form input[attr-val='sel']").prop('checked', function(i, val){
if(val == true){
arrConcat.push(i);
}
if(arrConcat.length == 3){
$('input[attr-val="totalsel"]').prop('checked', true);
}else{
$('input[attr-val="totalsel"]').prop('checked', false);
}
console.log(arrConcat)
});

}

</script>
</html>