<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $items=$("[name=item]:checkbox");
//全選
$("[name=checkAll]").click(function(){
//屬性值爲布爾型的,例如checked,disabled,建議用prop方法,其他的用attr方法
$items.prop("checked",true);
$("[name=All]").prop("checked",true);
});
//全不選
$("[name=checkNo]").click(function(){
$items.prop("checked",false);
$("[name=All]").prop("checked",false);
});
//反選
$("[name=checkFan]").click(function(){
$items.each(function(){
this.checked=!this.checked;
});
});
//[全選/全不選]複選框
$("[name=All]").click(function(){
$items.prop("checked",this.checked);
});
//當每個複選框都被勾選,使[全選/全不選]複選框勾選,如果有一個複選框未被勾選,則[全選/全不選]複選框也不勾選
$items.click(function(){
var a=true;
$items.each(function(){
if (!$(this).prop("checked")) {
a=false;
}
});
$("[name=All]").prop("checked",a);
});
})
</script>
<style type="text/css"></style>
</head>
<body>
<form>
<input type="checkbox" name="item">one
<input type="checkbox" name="item">two
<input type="checkbox" name="item">three
<input type="checkbox" name="item">four
<br>
<input type="button" name="checkAll" value="全選">
<input type="button" name="checkFan" value="反選">
<input type="button" name="checkNo" value="全不選">
<input type="checkbox" name="All">全選/全不選
</form>
</body>
</html>jquery基礎練習-全選，全不選，反選
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.