jquery实现全选、反选、获得所有选中的checkbox

前端技术 2023/09/07 JavaScript

举了7个不同的checkbox状态，和大家一一分享。

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、反选

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

或者

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

6、获取选择项的值

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

7、遍历选中项

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

下面实例讲述了jquery实现全选、反选、获得所有选中的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使用方法简单实例演示，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/19368

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案