当前位置: 首页 > 编程笔记 >

jquery获取复选框的值的简单实例

微生昌胤
2023-03-14
本文向大家介绍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实现复选框全选/取消全选/反选及获得选择的值的使用技巧和注意事项,需要的朋友参考一下