1.不带选项框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选全不选1(空白)</title>
<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
/*
功能需求：
*/
$(function(){
$("#checkedAllBtn").click(function(){
//①全选按钮：点击后所有爱好都选中 设置的属性值相同
$("input[name='items']").attr("checked" , true);//隐式迭代
});
$("#checkedNoBtn").click(function(){
//②全不选按钮：点击后所有爱好都不选中
$("input[name='items']").attr("checked" , false);//隐式迭代
});
$("#checkedRevBtn").click(function(){
//反选按钮：选中变为未选中，未选中变为选中
$("input[name='items']").each(function(){
//alert(this.checked);//正在遍历的dom对象
this.checked = !this.checked;
});//设置不同的值 无法隐式迭代
});
$("#sendBtn").click(function(){
//④提交按钮：点击后依次弹出选中内容
//获取选中的复选框
$("[name='items']:checked").each(function(){
alert(this.value);
});
});
});
</script>
</head>
<body>
<form method="post" action="">
熟悉的编程语言是：
<br />
<input type="checkbox" name="items" value="C语言" />C语言
<input type="checkbox" name="items" value="C++语言" />C++语言
<input type="checkbox" name="items" value="python语言" />python语言
<input type="checkbox" name="items" value="Java语言" />Java语言
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
2. 严谨的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选全不选1(空白)</title>
<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("#checkedAllBtn").click(function () {
var g = $('#checkedAllBtn').attr("checked");
if (g == undefined) {
$("input[name='items']").attr("checked", false);
} else {
$("input[name='items']").attr("checked", true);//隐式迭代
}
});
var ss = $("input[name='items']").length;
$("input[name='items']").click(function () {
var sss = 0;
sss = $("input[name='items']:checked").length;
if (ss == sss) {
$("#checkedAllBtn").prop("checked", true);
} else {
$("#checkedAllBtn").prop("checked", false);
}
})
$("#checkedRevBtn").click(function () {
//反选按钮：选中变为未选中，未选中变为选中
$("input[name='items']").each(function () {
//alert(this.checked);//正在遍历的dom对象
this.checked = !this.checked;
});//设置不同的值 无法隐式迭代
});
$("#sendBtn").click(function () {
//④提交按钮：点击后依次弹出选中内容
//获取选中的复选框
$("[name='items']:checked").each(function () {
alert(this.value);
});
});
});
</script>
</head>
<body>
<form method="post" action="">
熟悉的编程语言是：
<br/>
<input type="checkbox" name="items" value="C语言"/>C语言
<input type="checkbox" name="items" value="C++语言"/>C++语言
<input type="checkbox" name="items" value="python语言"/>python语言
<input type="checkbox" name="items" value="Java语言"/>Java语言
<br/>
<input type="checkbox" id="checkedAllBtn" value="全选"/>全选/反不选
<input type="checkbox" id="checkedRevBtn" value="反选"/>反选
<input type="checkbox" id="sendBtn" value="提交"/>提 交
</form>
</body>
</html>