jquery实现checkbox全选,反选,取消选择[教程]

checkbox-jquery

一、前言

全选和取消功能是网页中常见的操作,那怎么来实现这个功能呢?

今天这样写了一个全选和取消全选的功能吧!非常简单

 

二、HTML

<body>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<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>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
</body>

二、jQuery

$(document).ready(function(){
$("#checkall").click(function(){
$("input[name='items']").each(function(){
this.checked = true;
});
});

$("#checkallNo").click(function(){
$("input[name='items']").each(function(){
this.checked = false;
})
});

$("#check_revsern").click(function(){
$("input[name='items']").each(function(){
if (this.checked) {
this.checked = false;
}
else {
this.checked = true;
}
});
});

$("#checkItems").click(function(){
$("input[name='items']").each(function(){
if (this.checked) {
this.checked = false;
}
else {
this.checked = true;
}
});
});
});

 

????