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

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

 

一、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属性）。

 

二、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值必须各异，否则可以多选，从而违背单选的初衷。

 

三、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/>
         
<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（选中的数组的长度）。 当选中第一、三时，依次弹出：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对象。如：

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对象，需要用$()包装起来！

===============================================================================

 

 

评论

2 楼 天使建站 2018-05-10  

http://www.aijquery.cn/Html/biaoqian/82.html看这里 有在线实例演示

1 楼 好好学习-天天向上 2015-12-07  

走是一个字：好！！！好！！！好！！！