<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>请选择您的兴趣爱好</h2>
<input type="button" value="全选" id="chkAll" />
<input type="button" value="反选" id="reverse" />
<ul id="favors">
<li><input type="checkbox" value="" />打篮球</li>
<li><input type="checkbox" value="" />打篮球</li>
<li><input type="checkbox" value="" />看电影</li>
<li><input type="checkbox" value="" />看书</li>
<li><input type="checkbox" value="" />书法</li>
<li><input type="checkbox" value="" />唱歌</li>
<li><input type="checkbox" value="" />徒步旅行</li>
</ul>
<script src="lib/jquery-3.3.1.js"></script>
<script>
$(function(){
$('#chkAll').click(function(){
$('#favors>li>input').prop("checked",true);//prop() 方法设置或返回被选元素的属性和值。
})
$('#reverse').click(function(){
$('#favors>li>input').each(function(){//each() 方法为每个匹配元素规定要运行的函数。
if($(this).prop("checked")){
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
})
})
})
</script>
</body>
</html>
用jQuery写全选与反选案例
最新推荐文章于 2021-12-28 23:36:10 发布