欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

jquery获取复选框的值 checkbox 有大用

 

使用 jQuery 获取一组或者单个 checkbox 的选中状态的值。下面通过一个示例进行说明,假设现有一页面有一组 checkbox 的 name 的值为 id ,那么获取这组 name=id 的checkbox的值的方法如下:

Js代码  收藏代码
  1. var id_array=new Array();  

  2. $('input[name="id"]:checked').each(function(){  

  3.     id_array.push($(this).val());//向数组中添加元素  

  4. });  

  5. var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串  

  6. alert(idstr);  

 

 

另外 jquery 判断单个 checkbox 是否选中以及获取选中值的方法如下:

Js代码  收藏代码
  1. if($("#id").is(":checked")){//选中  

  2.     alert($("#id").val());//打印选中的值  

  3. }  

来自  http://blog.csdn.net/tiantangmuxin/article/details/46856603

 
 

  dedecms 织梦上的语法

image.png

//获得选中文件的文件名
function getCheckboxItem()
{
  var allSel="";
  if(document.form2.arcID.value) return document.form2.arcID.value;
  for(i=0;i<document.form2.arcID.length;i++)
  {
     if(document.form2.arcID[i].checked)
     {
        if(allSel=="")
           allSel=document.form2.arcID[i].value;
        else
           
allSel=allSel+"`"+document.form2.arcID[i].value;
     }
  }
  return allSel;
}


使用JQuery获取被选中的checkbox的value值

 

上网查了一下,感觉一些人回答得真的是不知所云,要么代码不够简便。或者是有些想装逼成分等。

以下为使用JQuery获取input checkbox被选中的值代码:

<html>
    <head>
        <meta charset="gbk">
        <!-- 引入JQuery -->
        <script src="jquery-1.3.1.js" type="text/javascript"></script>
    </head>

    <body>
        <input type="checkbox" value="橘子" name="check">橘子1</input>
        <input type="checkbox" value="香蕉" name="check">香蕉1</input>
        <input type="checkbox" value="西瓜" name="check">西瓜1</input>
        <input type="checkbox" value="芒果" name="check">芒果1</input>
        <input type="checkbox" value="葡萄" name="check">葡萄1</input>
        
        <input type="button" value="方法1" id="b1">
        <input type="button" value="方法2" id="b2">


    </body>
    
    <script>
        //方法1
        $("#b1").click(function(){
            //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
            //意思是选择被选中的checkbox
            $.each($('input:checkbox:checked'),function(){
                window.alert("你选了:"+
                    $('input[type=checkbox]:checked').length+"个,其中有:"+$(this).val());
            });
        });
        
        //方法2
        $("#b2").click(function(){
            $.each($('input:checkbox'),function(){
                if(this.checked){
                    window.alert("你选了:"+
                        $('input[type=checkbox]:checked').length+"个,其中有:"+$(this).val());
                }
            });
        });
    </script>
</html>

来自 http://www.cnblogs.com/td960505/p/6123510.html


jquery获取复选框的值

 

 

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

  2. <mce:script type="text/javascript"><!--  

  3.     

  4. function chk(){    

  5.   var obj=document.getElementsByName('test');  //选择所有name="'test'"的对象,返回数组    

  6.   //取到对象数组后,我们来循环检测它是不是被选中    

  7.   var s='';    

  8.   for(var i=0; i<obj.length; i++){    

  9.     if(obj[i].checked) s+=obj[i].value+',';  //如果选中,将value添加到变量s中    

  10.   }    

  11.   //那么现在来检测s的值就知道选中的复选框的值了    

  12.   alert(s==''?'你还没有选择任何内容!':s);    

  13. }    

  14.     

  15. function jqchk(){  //jquery获取复选框值    

  16.   var chk_value =[];    

  17.   $('input[name="test"]:checked').each(function(){    

  18.    chk_value.push($(this).val());    

  19.   });    

  20.   alert(chk_value.length==0 ?'你还没有选择任何内容!':chk_value);    

  21. }    

  22. // --></mce:script>  

 

对checkbox的其他几个操作

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

js代码

 

 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  2. <html xmlns="http://www.w3.org/1999/xhtml">  

  3. <head>  

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

  5. <title>louis-blog >> jQuery 对checkbox的操作</title>  

  6. <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>  

  7. <SCRIPT LANGUAGE="JavaScript">  

  8. <!--  

  9. $("document").ready(function(){  

  10. $("#btn1").click(function(){  

  11. $("[name='checkbox']").attr("checked",'true');//全选  

  12. })  

  13. $("#btn2").click(function(){  

  14. $("[name='checkbox']").removeAttr("checked");//取消全选  

  15. })  

  16. $("#btn3").click(function(){  

  17. $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数  

  18. })  

  19. $("#btn4").click(function(){  

  20. $("[name='checkbox']").each(function(){//反选  

  21. if($(this).attr("checked")){  

  22. $(this).removeAttr("checked");  

  23. }  

  24. else{  

  25. $(this).attr("checked",'true');  

  26. }  

  27. })  

  28. })  

  29. $("#btn5").click(function(){//输出选中的值  

  30. var str="";  

  31. $("[name='checkbox'][checked]").each(function(){  

  32. str+=$(this).val()+"/r/n";  

  33. //alert($(this).val());  

  34. })  

  35. alert(str);  

  36. })  

  37. })  

  38. -->  

  39. </SCRIPT>  

  40. </HEAD>  

  41. <body style="text-align:center;margin: 0 auto;font-size: 12px;" mce_style="text-align:center;margin: 0 auto;font-size: 12px;">  

  42. <div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;">  

  43. <form name="form1" method="post" action="">  

  44. <input type="button" id="btn1" value="全选">  

  45. <input type="button" id="btn2" value="取消全选">  

  46. <input type="button" id="btn3" value="选中所有奇数">  

  47. <input type="button" id="btn4" value="反选">  

  48. <input type="button" id="btn5" value="获得选中的所有值">  

  49. <br /><br />  

  50. <input type="checkbox" name="checkbox" value="checkbox1">  

  51. checkbox1  

  52. <input type="checkbox" name="checkbox" value="checkbox2">  

  53. checkbox2  

  54. <input type="checkbox" name="checkbox" value="checkbox3">  

  55. checkbox3  

  56. <input type="checkbox" name="checkbox" value="checkbox4">  

  57. checkbox4  

  58. <input type="checkbox" name="checkbox" value="checkbox5">  

  59. checkbox5  

  60. <input type="checkbox" name="checkbox" value="checkbox6">  

  61. checkbox6  

  62. </form>  

  63. </div>  

  64. </body>  

  65. </HTML> 

来自 http://www.cnblogs.com/goody9807/archive/2012/05/31/2528506.html
http://www.jb51.net/article/48361.htm

普通分类: