zoukankan      html  css  js  c++  java

  • jquery获取复选框的值

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
    2.  <html>    
    3.  <head>    
    4.  <mce:style><!-- 
    5.    
    6.     
    7.   
    8. --></mce:style><style mce_bogus="1">    
    9.      
    10.  </style>    
    11.  <title>JS获取复选框被选中的值</title>    
    12.  </head>    
    13.  <body>    
    14.  <input type="checkbox" name="test" value="0" />0      
    15.  <input type="checkbox" name="test" value="1" />1      
    16.  <input type="checkbox" name="test" value="2" />2      
    17.  <input type="checkbox" name="test" value="3" />3      
    18.  <input type="checkbox" name="test" value="4" />4      
    19.  <input type="checkbox" name="test" value="5" />5      
    20.  <input type="checkbox" name="test" value="6" />6      
    21.  <input type="checkbox" name="test" value="7" />7      
    22.  <input type="button" onclick="chk()" value="提  交" />    
    23.  </body>    
    24.  </html  

    JS代码

     
     
    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. $("document").ready(function(){  
    2. $("#btn1").click(function(){  
    3. $("[name='checkbox']").attr("checked",'true');//全选  
    4. })  
    5. $("#btn2").click(function(){  
    6. $("[name='checkbox']").removeAttr("checked");//取消全选  
    7. })  
    8. $("#btn3").click(function(){  
    9. $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数  
    10. })  
    11. $("#btn4").click(function(){  
    12. $("[name='checkbox']").each(function(){//反选  
    13. if($(this).attr("checked")){  
    14. $(this).removeAttr("checked");  
    15. }  
    16. else{  
    17. $(this).attr("checked",'true');  
    18. }  
    19. })  
    20. })  
    21. $("#btn5").click(function(){//输出选中的值  
    22. var str="";  
    23. $("[name='checkbox'][checked]").each(function(){  
    24. str+=$(this).val()+"/r/n";  
    25. //alert($(this).val());  
    26. })  
    27. alert(str);  
    28. })  
    29. })  

    html代码:

     
     
      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;  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>  
  • 相关阅读:
    【百度搜索研发部】以求医为例谈搜索引擎排序算法的基础原理（转）
    TF-IDF与余弦相似性的应用（三）：自动摘要
    TF-IDF与余弦相似性的应用（一）：自动提取关键词
    TF-IDF与余弦相似性的应用（二）：找出相似文章
    技术向：一文读懂卷积神经网络CNN（转）
    [透析] 卷积神经网络CNN究竟是怎样一步一步工作的？（转）
    像素间的基本关系-距离（转）
    Swift学习笔记-字符串和字符(Strings and Characters)-比较字符串 (Comparing Strings)
    Swift学习笔记-基本运算符(Basic Operators)-空合运算符(Nil Coalescing Operator)
    Swift学习笔记-基本运算符(Basic Operators)-求余运算符
  • 原文地址：https://www.cnblogs.com/Jeremy2001/p/6858133.html
Copyright © 2011-2022 走看看