萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 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> 
copyright © 萬盛學電腦網 all rights reserved