代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.0.min.js"></script>
</head>
<body>
<script>
$(function() {
//全选/全不选
$("#all").click(function() {
$("[name=items]:checkbox").prop("checked", this.checked);
});
$("[name=items]:checkbox").click(function() {
var flag = true;
$("[name=items]:checkbox").each(function() {
if(!this.checked) {
flag = false;
}
});
$("#all").attr("checked", flag);
})
//全选
$("#selectAll").click(function() {
$("[name=items]:checkbox").each(function() {
$(this).attr("checked", true);
});
});
//全不选
$("#unSelect").click(function() {
$("[name=items]:checkbox").each(function() {
$(this).attr("checked", false);
});
});
//反选
$("#reverse").click(function() {
$("[name=items]:checkbox").each(function() { //遍历每一个复选框
//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
this.checked = !this.checked; //js方法
});
});
//输出选中的值
$("#btn").click(function() {
var str = "你选中的是：\r\n";
$("[name=items]:checkbox:checked").each(function() {
str += $(this).val() + "\r\n";
});
alert(str);
});
})
</script>
<ul id="list">
<li><label><input type="checkbox" name="items" value="1"> 一 </label></li>
<li><label><input type="checkbox" name="items" value="2"> 二 </label></li>
<li><label><input type="checkbox" name="items" value="3"> 三 </label></li>
<li><label><input type="checkbox" name="items" value="4"> 四 </label></li>
<li><label><input type="checkbox" name="items" value="5"> 五 </label></li>
<li><label><input type="checkbox" name="items" value="6"> 六 </label></li>
</ul>
<input type="checkbox" id="all"> 全选/全不选</br>
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" id="btn" id="getValue"> </body> </html>