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

jquery实现反选、全选、全不选功能

2017-12-26 15:10 330 查看

效果图如下

代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
function allof() {
$("input").prop("checked",true);
}
function allnot() {
$("input").prop("checked",false);
}
function other() {
$("input[name='hobby']").each(function(){
$(this).prop("checked",$(this).prop("checked")?false:true);
});
}
</script>
</head>
<body>
<input type="checkbox" name="hobby" value="a"> A <hr>
<input type="checkbox" name="hobby" value="b"> B <hr>
<input type="checkbox" name="hobby" value="c"> C <hr>
<input type="checkbox" name="hobby" value="d"> D <hr>
<input type="checkbox" name="hobby" value="e"> E <hr>
<input type="checkbox" name="hobby" value="f"> F <hr>
<button onclick="allof()">全选</button>
<button onclick="other()">反选</button>
<button onclick="allnot()">全不选</button>
</body>
</html>

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

标签： jquery

相关文章推荐

新的分享

章节导航