首页 技术 正文
技术 2022年11月16日
0 收藏 546 点赞 4,625 浏览 6243 个字

1、全选

$("#btn1").click(function(){
$("input[name='checkbox']").attr("checked","true");
})

2、取消全选(全不选)

$("#btn2").click(function(){
$("input[name='checkbox']").removeAttr("checked");
})

3、选中所有奇数

$("#btn3").click(function(){
$("input[name='checkbox']:odd").attr("checked","true");
})

4、选中所有偶数

$("#btn6").click(function(){
$("input[name='checkbox']:even").attr("checked","true");
})

5、反选

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

$("#btn4").click(function(){
$("input[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked","true");
}
})
})

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

或者

$("#invert").click(function(){
$("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){
$(o).attr("checked",!$(o).attr("checked"));
});
});

6、获取选择项的值

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

var aa="";
$("#btn5").click(function(){
$("input[name='checkbox']:checkbox:checked").each(function(){
aa+=$(this).val()
})
document.write(aa);
})
})

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

7、遍历选中项

$("input[type=checkbox][checked]").each(function(){
//由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});

8、例子

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
//全选
$("#btn1").click(function(){
$("input[name='checkbox']").attr("checked","true");
})
//取消全选
$("#btn2").click(function(){
$("input[name='checkbox']").removeAttr("checked");
})
//选中所有基数
$("#btn3").click(function(){
$("input[name='checkbox']:even").attr("checked","true");
})
//选中所有偶数
$("#btn6").click(function(){
$("input[name='checkbox']:odd").attr("checked","true");
})
//反选
$("#btn4").click(function(){
$("input[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked","true");
}
})
})
//或许选择项的值
var aa="";
$("#btn5").click(function(){
$("input[name='checkbox']:checkbox:checked").each(function(){
aa+=$(this).val()
})
document.write(aa);
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn6" 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
</div>
</form>
</body>
</html>

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

9、效果图

aaarticlea/png;base64,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” alt=”” />

  致谢:感谢您的耐心阅读!

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,105
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,582
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,429
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,836
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,919