Jquery对checkbox操作，全选，取值

最新推荐文章于 2021-12-06 16:15:34 发布

原创最新推荐文章于 2021-12-06 16:15:34 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #HTML #ViewUI

jquery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现全选功能的具体案例。通过点击全选按钮可以控制一组月份复选框的选择状态，并提供了取值按钮来获取已选中的月份值。此示例展示了如何使用jQuery操作DOM元素及事件处理。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.2.2.js"></script>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function() {
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true) { // 全选
$("input[name='month']").each(function() {
$(this).attr("checked", true);
});
} else { // 取消全选
$("input[name='month']").each(function() {
$(this).attr("checked", false);
});
}
});
$("input[name='month']").click(function(){
$("input[name='month']").each(function(){
var l=$("input[name='month']").length;
var a = true;
for(i=0;i<l;i++)
{
if($("input[name='month']")[i].checked==false)
{
a=false;
break;
}
}
if(a){
$("#checkedAll").attr("checked", true);
}else{
$("#checkedAll").attr("checked", false);
}
});
});
});

function query(){
$("input[name='month']").each(function(){
var l=$("input[name='month']").length;
var month="";
var k=0;
for(i=0;i<l;i++)
{
if($("input[name='month']")[i].checked==true)
{
if(k==0)
month+=$("input[name='month']")[i].value;
else
month+=","+$("input[name='month']")[i].value;
k++;
}
}
alert(month);
});

}
</script>
<body>
<input type="checkbox" name="checkedAll" id="checkedAll" />
<label for="checkedAll">
全选
</label>
<input type="checkbox" name="month" id="1" value="1" />
<label for="1">
1月
</label>
<input type="checkbox" name="month" id="2" value="2" />
<label for="2">
2月
</label>
<input type="checkbox" name="month" id="3" value="3" />
<label for="3">
3月
</label>
<input type="checkbox" name="month" id="4" value="4" />
<label for="4">
4月
</label>
<input type="checkbox" name="month" id="5" value="5" />
<label for="5">
5月
</label>
<input type="checkbox" name="month" id="6" value="6" />
<label for="6">
6月
</label>
<input type="checkbox" name="month" id="7" value="7" />
<label for="7">
7月
</label>
<input type="checkbox" name="month" id="8" value="8" />
<label for="8">
8月
</label>
<input type="checkbox" name="month" id="9" value="9" />
<label for="9">
9月
</label>
<input type="checkbox" name="month" id="10" value="10" />
<label for="10">
10月
</label>
<input type="checkbox" name="month" id="11" value="11" />
<label for="11">
11月
</label>
<input type="checkbox" name="month" id="12" value="12" />
<label for="12">
12月
</label>

<input type="button" onclick="query()" value="取值"/>

</body>
</html>