javaweb-------------------jQuery選擇器練習(全選,反選)
阿新 • • 發佈:2021-01-18
技術標籤:筆記
練習:全選 反選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script type=" text/javascript">
$(function () {
//全選
$("#checkedallbtn").click(function () {
$(":checkbox").prop("checked",true)
});
// 全不選
$("#checkednobtn").click(function () {
$ (":checkbox").prop("checked",false)
});
//反選
$("#checkedrevbtn").click(function () {
$(":checkbox[name='items']").each(function () {
this.checked=!this.checked;
});
//反選同時檢查全選/全不選
var allcount=$(":checkbox[name='items']").length;
var checkedcount=$(":checkbox[name='items']:checked").length;
$("#checkedallbox").prop("checked",allcount==checkedcount);
});
//提交
$("#commit").click(function () {
//獲取選中的items
$(":checkbox[name='items']:checked").each(function () {
alert(this.value);
})
})
//全選/全不選
$("#checkedallbox").click(function () {
//在事件的function函式中,有一個this物件,這個物件是當前正在響應事件的dom物件
$(":checkbox[name='items']").prop("checked",this.checked);
})
//球類不全選中 全選也應該不選中
$(":checkbox[name='items']").click(function () {
var allcount=$(":checkbox[name='items']").length;
var checkedcount=$(":checkbox[name='items']:checked").length;
$("#checkedallbox").prop("checked",allcount==checkedcount);
})
});
</script>
</head>
<body>
<form method="post" action="" >
你愛好的運動是? <input type="checkbox" id="checkedallbox"> 全選/全不選
<br>
<br>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="籃球">籃球
<input type="checkbox" name="items" value="排球">排球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<br>
<br>
<input type="button" id="checkedallbtn" value="全選">
<input type="button" id="checkednobtn" value="全不選">
<input type="button" id="checkedrevbtn" value="反選">
<input type="button" id="commit" value="提交">
</form>
</body>
</html>
- id用#
- 類用.
- 表單標籤用: