转载 radio值获取

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

博客分类：

 
• jQuery

select下拉框 radio单选按钮 checkbox多选框 jquery获取选中的值 

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

 

1、select下拉单选框

测试页面：

 

<label> select下拉框测试</label> <br/>
       <select id="select">
         <option value ="1">Volvo</option>
         <option value ="2">Saab</option>
         <option value="3">Opel</option>
         <option value="4">Audi</option>
       </select><br/>
        <input type="button" value="下拉框测试" onclick="submit1()" /> <br/>
        <input type="button" value="下拉框设置选中" onclick="set1()" /><br/><br/>

 测试js:

 

 

 $(function(){
   $("select").change(function() {//下拉框选项改变所触发的事件
   var index = $("select").get(0).selectedIndex;//获取下拉框所选中项的索引
   alert("选中的是第：" + (index+1) + "项!");
 });
});

function submit1() {
   var $selected = $("select").find("option:selected");//所选中的下拉框选项
     var text= $selected.text();//所选中的文本（显示在页面的文本）
    var val = $selected.val();//所选中的值（通常是提交给后台的值）

   alert("选中的text:" + text + " ,value:" + val);
 }

 function set1() {
     var obj =  $("select").find("option[value='2']");//指定vlaue为2的下拉框选项(注意这种选择器的写法)
      obj.attr("selected", true);//指定该选项被选中
 }

测试：默认状况下，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属性）。

 

2、radio单选按钮

测试页面：

<label> radio单选框测试</label> <br/>
       <input type="radio" name="danx" value="sd" checked="checked" />学生
       <input type="radio" name="danx" value="tea" />教师
       <input type="radio" name="danx" value="adm" />管理员 <br/>

        <input type="button" value="单选按钮测试" onclick="submit2()" /> <br/>
        <input type="button" value="单选框设置选中" onclick="set2()" /><br/><br/>

 测试js:

$(function(){
     $("input:radio").click(function() {
         alert("改变了选择");//单选按钮的点击事件  还有blur focus事件
      });
});

function set2() {
   var $checked = $("input[type=radio]").eq(2);//单选按钮中索引为2的选项（"管理员"选项）
     //$checked.attr("checked", true);
      var $checked2 = $("input:radio[value='tea']");//单选按钮中value为tea的选项
      $checked2.attr("checked", true);
}

function submit2() {
    var $radio = $("input[type='radio']:checked");//获取选中的选项
      var val = $radio.val();//获取选中的选项的值value
      alert("选中的val:" + val);

 

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

上述简单的js已经说明了常见的radio单选按钮选中的值的用法。须要注意的是：通常radio单选按钮的各选项，name值必须各异，不然能够多选，从而违背单选的初衷。

 

3、checkbox多选框

测试页面：

<label>多选框测试</label> <br/>
       <label>选项1</label><input name="checkbox" type="checkbox" value="value1" />
       <label>选项2</label><input name="checkbox" type="checkbox" value="value2" />
       <label>选项3</label><input name="checkbox" type="checkbox" value="value3" />
       <label>选项4</label><input name="checkbox" type="checkbox" value="value4" /><br/>

t;input type="button" value="多选按钮测试" onclick="submit3()" />

 测试js:

function submit() {
$checkbox = $("input[name='checkbox']:checked");//这里的这种选择器是关键
alert($checkbox.length);
if($checkbox) {//表示有选中的多选框，此时为true；若是没有一个选中，这里会是false
       for(var i=0; i<$checkbox.length; i++) {
           alert($checkbox[i].value);//选中项的值
       }
     }
}

 测试：点击“多选按钮测试”按钮时，当全不选时，弹出0（选中的数组的长度）。 当选中第1、三时，依次弹出：2 value1 value3;当选中第2、3、四时，依次弹出：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对象。如：

var input = $("input[name='isinst']")[0];// $("input[name='isinst']")是一数组
 $(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对象，须要用$()包装起来！