转载 radio值获取

2022-04-20 16:33:40

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

一、select下拉单选框

测试页面：

  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:

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

测试：默认情况下，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单选按钮

测试页面：

  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. <input type="button" value="单选按钮测试" onclick="submit2()" /> <br/>
  6. <input type="button" value="单选框设置选中" onclick="set2()" /><br/><br/>

测试js:

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

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

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

三、checkbox多选框

测试页面：

  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. t;input type="button" value="多选按钮测试" onclick="submit3()" />

测试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对象。如：

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

上一篇：poj 3177&&3352 求边双联通分量，先求桥，然后求分量（ 临界表代码）


下一篇：Devils never rest