转载 radio值获取

选择控件：select ，radio，checkbox之用jquery获取选中值的小结

博客分类：
select下拉框radio单选按钮checkbox多选框jquery获取选中的值 

最近是因为用到了checkbox ，需要用jquery获取多选框的选择值。虽然简单，但其实自己还是花了一小点时间的（因为不太熟……），所以整理一下。顺便捎上了select下拉框，radio单选按钮。下面用小的示例整理下如何获取这些选择控件所选中的值。

一、select下拉单选框

测试页面：

Html代码  收藏代码
  1. <label> select下拉框测试</label> <br/>  
  2.        <select id="select">  
  3.          <option value ="1">Volvo</option>  
  4.          <option value ="2">Saab</option>  
  5.          <option value="3">Opel</option>  
  6.          <option value="4">Audi</option>  
  7.        </select><br/>  
  8.         <input type="button" value="下拉框测试" onclick="submit1()" /> <br/>  
  9.         <input type="button" value="下拉框设置选中" onclick="set1()" /><br/><br/>  

 测试js:

Js代码  收藏代码
  1.  $(function(){  
  2.    $("select").change(function() {//下拉框选项改变所触发的事件  
  3.    var index = $("select").get(0).selectedIndex;//获取下拉框所选中项的索引  
  4.    alert("选中的是第：" + (index+1) + "项!");  
  5.  });  
  6. });  
  7.   
  8. function submit1() {  
  9.    var $selected = $("select").find("option:selected");//所选中的下拉框选项  
  10.      var text= $selected.text();//所选中的文本（显示在页面的文本）  
  11.     var val = $selected.val();//所选中的值（一般是提交给后台的值）  
  12.                  
  13.    alert("选中的text:" + text + " ,value:" + val);  
  14.  }  
  15.               
  16.  function set1() {  
  17.      var obj =  $("select").find("option[value='2']");//指定vlaue为2的下拉框选项(注意这种选择器的写法)  
  18.       obj.attr("selected", true);//指定该选项被选中  
  19.  }  

测试：默认情况下，select下拉框显示的（即选中的）是第一项（索引为0）；当选中第'Opel'项时 ,会弹出：选中的是第3项；点击“下拉框测试”按钮时，弹出：选中的text:Opel, value:3；点击“下拉框设置选中”按钮时，下拉框显示选中的值会是：Saab。

注：上面var index = $("select").get(0).selectedIndex用get(0)是因为$("select")选择器不能保证只得到单个确定的select下拉框（即使页面只有一个select）,它得到的会是一个select的数组。所以你需要得到具体的select就需要用到下标了。

小结：关于常见的select的取值的用法已经在上述js中，select只可提交单个值（是value而非text）到后台（通过name属性）。

二、radio单选按钮

测试页面：

Html代码  收藏代码
  1. <label> radio单选框测试</label> <br/>  
  2.        <input type="radio" name="danx" value="sd" checked="checked" />学生   
  3.        <input type="radio" name="danx" value="tea" />教师   
  4.        <input type="radio" name="danx" value="adm" />管理员 <br/>  
  5.          
  6.         <input type="button" value="单选按钮测试" onclick="submit2()" /> <br/>  
  7.         <input type="button" value="单选框设置选中" onclick="set2()" /><br/><br/>  

 测试js:

Js代码  收藏代码
  1. $(function(){  
  2.      $("input:radio").click(function() {  
  3.          alert("改变了选择");//单选按钮的点击事件  还有blur focus事件  
  4.       });  
  5. });  
  6.   
  7. function set2() {  
  8.    var $checked = $("input[type=radio]").eq(2);//单选按钮中索引为2的选项（"管理员"选项）  
  9.      //$checked.attr("checked", true);  
  10.       var $checked2 = $("input:radio[value='tea']");//单选按钮中value为tea的选项  
  11.       $checked2.attr("checked", true);  
  12. }  
  13.              
  14. function submit2() {  
  15.     var $radio = $("input[type='radio']:checked");//获取选中的选项  
  16.       var val = $radio.val();//获取选中的选项的值value  
  17.       alert("选中的val:" + val);  
  18.                  

测试：同理，在默认情况下，单选按钮显示的选中的值是第一个。当我选中“教师”选项，时，会弹出“改变了选择”字样 。当我选择了"教师"选项时，会弹出：“选中的val:tea”。点击“单选框设置选中”按钮时，会发现页面的“教师”选项被选中。提交给后台的即是选中的val（通过name属性）；

上述简单的js已经说明了常见的radio单选按钮选中的值的用法。需要注意的是：一般radio单选按钮的各选项，name值必须各异，否则可以多选，从而违背单选的初衷。

三、checkbox多选框

测试页面：

Html代码  收藏代码
  1. <label>多选框测试</label> <br/>  
  2.        <label>选项1</label><input name="checkbox" type="checkbox" value="value1" />  
  3.        <label>选项2</label><input name="checkbox" type="checkbox" value="value2" />  
  4.        <label>选项3</label><input name="checkbox" type="checkbox" value="value3" />  
  5.        <label>选项4</label><input name="checkbox" type="checkbox" value="value4" /><br/>  
  6.          
  7. t;input type="button" value="多选按钮测试" onclick="submit3()" />  

 测试js:

Js代码  收藏代码
  1. function submit() {  
  2. $checkbox = $("input[name='checkbox']:checked");//这里的这种选择器是关键  
  3. alert($checkbox.length);  
  4. if($checkbox) {//表示有选中的多选框，此时为true；如果没有一个选中，这里会是false  
  5.        for(var i=0; i<$checkbox.length; i++) {  
  6.            alert($checkbox[i].value);//选中项的值  
  7.        }  
  8.      }  
  9. }  

 测试：点击“多选按钮测试”按钮时，当全不选时，弹出0（选中的数组的长度）。 当选中第一、三时，依次弹出：2 value1 value3;当选中第二、三、四时，依次弹出：3 value1 value3 value4 以此类推……

但如果你直接尝试$checkbox的话，得到的永远是数组第一个元素的值！！

同理，控制选项选中与否的语法为：$checkbox[i].attr("checked", true)——选中， $checkbox[i].attr("checked", false)——不选中。

注：checkbox选中项永远是一个【数组】，这跟上面select和radio单选控件是不一样的，单选控件选项永远是单个对象，而checkbox哪怕你只选中一项，他也是一个只有一个元素的数组，此时当你想要用该选中项的语法时，必须是用get(0)或[0]来得到具体的对象。（而关于checkbox提交给后台的值(name属性)，是由前端Js控制的，可以是用，分隔的字符串也可以是字符串数组）

还需注意的一点是：一般情况下：只有jquery的id选择器可以得到确切的jquery对象，其他选择器诸如name选择器，class选择器等等，一般得到的是【jquery对象数组】，想取其中某个具体的对象，需要用下标[n]，但用了下标也只是取到一个js对象，需要再次用$包装起来才是一个jq对象。如：

Java代码  收藏代码
  1. var input = $("input[name='isinst']")[0];// $("input[name='isinst']")是一数组  
  2.  $(input).val("1");//$(input)才是jquery对象  

 注：如果你用如name选择器$("input[name='isinst']").val(val)时，你会给所有name为isinst的input框赋值val，而你用$("input[name='isinst']").val()时，仅仅取到的是这个对象数组的第一个元素的value.

本篇小结只总结了常见的选择控件如何用jquery获取选中值的用法。具体、详细的一些用法持续补充中。。

Btw：通过parentElement属性获取父元素得到的是一个js对象，如果需要用jquery对象，需要用$()包装起来！

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/MiWang/p/5794596.html