昨天群里一个朋友 问了一些关于jquery
操作checkbox的问题，今天写了一个小小的例子，供大家参考
例子里面包括了一下几个功能。
<input
type="button" id="btn1" value="全选">
<input type="button" id="btn2"
value="取消全选">
<input type="button" id="btn3"
value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
代码
<!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 LANGUAGE="JavaScript"
src="http://www.cnjquery.com/demo/jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
})
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
})
})
$("#btn5").click(function(){
var
str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"\r\n";
//alert($(this).val());
})
alert(str);
})
})
//-->
</SCRIPT>
</HEAD>
<BODY>
<form name="form1" method="post" action="">
<input type="button" id="btn1" value="全选">
<input type="button"
id="btn2" value="取消全选">
<input type="button" id="btn3"
value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
<br>
<input type="checkbox" name="checkbox" value="checkbox1">
checkbox1
<input type="checkbox" name="checkbox"
value="checkbox2">
checkbox2
<input type="checkbox"
name="checkbox" value="checkbox3">
checkbox3
<input
type="checkbox" name="checkbox" value="checkbox4">
checkbox4
<input type="checkbox" name="checkbox" value="checkbox5">
checkbox5
<input type="checkbox" name="checkbox"
value="checkbox6">
checkbox6
<input type="checkbox"
name="checkbox" value="checkbox7">
checkbox7
<input
type="checkbox" name="checkbox"
value="checkbox8">
checkbox8
</form>
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_1"
/>1<br />
<input type="checkbox" name="checkbox_name[]"
id="checkbox_name_2" />2<br />
<input type="checkbox"
name="checkbox_name[]" id="checkbox_name_3" />3<br />
<input
type="checkbox" name="checkbox_name[]" id="checkbox_name_4" />4<br
/>
<input type="checkbox" name="checkedAll"
id="checkedAll"/>全选/取消全选
<script type="text/javascript">
<!--
j_q(function() {
j_q("#checkedAll").click(function() {
if (j_q(this).attr("checked")
== true) { // 全选
j_q("input[@name='checkbox_name[]']").each(function() {
j_q(this).attr("checked", true);
});
} else { // 取消全选
j_q("input[@name='checkbox_name[]']").each(function() {
j_q(this).attr("checked", false);
});
}
});
});
//-->
</script>
 |
Austin Liu 刘恒辉
Project Manager and Software Designer E-Mail：lzhdim@163.com Blog：https://lzhdim.cnblogs.com 欢迎收藏和转载此博客中的博文，但是请注明出处，给笔者一个与大家交流的空间。谢谢大家。 |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix