您的位置：首页 > 其它

jq获取复选框的值（全选，反选等）

2016-10-25 15:05 423 查看
 


<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代码

 


<!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>  
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航