jquery如何获取复选框的值

前端技术 2023/09/06 JavaScript
复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<mce:style><!--
--></mce:style><style mce_bogus=\"1\">

</style>
<title>JS获取复选框被选中的值</title>
</head>
<body>
<input type=\"checkbox\" name=\"test\" value=\"0\" />0
<input type=\"checkbox\" name=\"test\" value=\"1\" />1
<input type=\"checkbox\" name=\"test\" value=\"2\" />2
<input type=\"checkbox\" name=\"test\" value=\"3\" />3
<input type=\"checkbox\" name=\"test\" value=\"4\" />4
<input type=\"checkbox\" name=\"test\" value=\"5\" />5
<input type=\"checkbox\" name=\"test\" value=\"6\" />6
<input type=\"checkbox\" name=\"test\" value=\"7\" />7
<input type=\"button\" onclick=\"chk()\" value=\"提 交\" />
</body>
</html

JS代码
复制代码 代码如下:

<mce:script src=\"jquery.js\" mce_src=\"jquery.js\"></mce:script><!--这是载入jquery.js文件，如果不使用jquery可以去掉-->
<mce:script type=\"text/javascript\"><!--

function chk(){
var obj=document.getElementsByName(\'test\'); //选择所有name=\"\'test\'\"的对象，返回数组
//取到对象数组后，我们来循环检测它是不是被选中
var s=\'\';
for(var i=0; i<obj.length; i++){
if(obj[i].checked) s+=obj[i].value+\',\'; //如果选中，将value添加到变量s中
}
//那么现在来检测s的值就知道选中的复选框的值了
alert(s==\'\'?\'你还没有选择任何内容！\':s);
}

function jqchk(){ //jquery获取复选框值
var chk_value =[];
$(\'input[name=\"test\"]:checked\').each(function(){
chk_value.push($(this).val());
});
alert(chk_value.length==0 ?\'你还没有选择任何内容！\':chk_value);
}
// --></mce:script>

对checkbox的其他几个操作

1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值

js代码
复制代码 代码如下:


$(\"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);
})
})

html代码:
复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>louis-blog >> jQuery 对checkbox的操作</title>
<mce:script type=\'text/javascript\' src=\"http://leotheme.cn/wp-includes/js/jquery/jquery.js\" mce_src=\"http://leotheme.cn/wp-includes/js/jquery/jquery.js\"></mce: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 style=\"text-align:center;margin: 0 auto;font-size: 12px;\" mce_style=\"text-align:center;margin: 0 auto;font-size: 12px;\">
<div style=\"border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;\">
<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 /><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
</form>
</div>
</body>
</HTML>

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

转载请注明出处。

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

我的博客

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

我的标签

随笔档案