jquery获取复选框的值的简单实例
微生昌胤
本文向大家介绍jquery获取复选框的值的简单实例，包括了jquery获取复选框的值的简单实例的使用技巧和注意事项，需要的朋友参考一下
<!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>
以上这篇jquery获取复选框的值的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
类似资料：
-
本文向大家介绍jquery获取复选框checkbox的值的简单实现方法，包括了jquery获取复选框checkbox的值的简单实现方法的使用技巧和注意事项，需要的朋友参考一下 jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数。 :checked :匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) js: jquer
-
问题内容： 所以我得到的代码看起来像这样： 我只需要Javascript来获取当前选中的任何复选框的值。 编辑 ：要添加，将只有一个复选框。 问题答案： 对于现代浏览器 ： 通过使用： 没有_以下内容的 _纯javascript ：
-
问题内容： 如何在jQuery中获得复选框的值？ 问题答案： 要获取Value属性的值，您可以执行以下操作： 或者，如果您为其设置了或，则可以： 但是，无论是否选中它都会返回 相同的 值，这可能会造成混淆，因为它与提交的表单行为不同。 要检查是否已检查，请执行以下操作：
-
所以我有这样的代码: 我只需要Javascript来获取当前选中的任何复选框的值。 编辑：要添加，只有一个复选框。
-
问题内容： 我想获取Flask中复选框的值。我读过一篇类似的文章，并尝试使用和的输出，因为这是我使用的列表，但看来我做错了。这是获取输出的正确方法还是有更好的方法？ 问题答案： 你并不需要使用，只是如果只有一个给定名称的输入，尽管它不应该的事。你显示的内容确实有效。这是一个简单的可运行示例： 提交带有两个复选框的表单，然后在终端中打印。请注意，html表单的方法是，post因此数据将位于中。 在某
-
本文向大家介绍jQuery实现复选框全选/取消全选/反选及获得选择的值，包括了jQuery实现复选框全选/取消全选/反选及获得选择的值的使用技巧和注意事项，需要的朋友参考一下