`
Everyday都不同
  • 浏览: 711888 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

选择控件: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对象,需要用$()包装起来!

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

 

 

0
1
分享到:
评论
2 楼 天使建站 2018-05-10  
http://www.aijquery.cn/Html/biaoqian/82.html看这里 有在线实例演示
1 楼 好好学习-天天向上 2015-12-07  
走是一个字:好!!!好!!!好!!!

相关推荐

    jQuery设置和获取select、checkbox、radio的选中值方法

    select、checkbox、radio是很常用的表单控件,这篇文章主要介绍了jQuery设置和获取select、checkbox、radio的选中值方法,有兴趣的可以了解一下。

    JQuery获取input控件值.docx

    JQUERY获取text,areatext,radio,checkbox,select值

    jq基本控件操作集合

    jq基本控件操作集合:select,radio,checkbox全选

    jQuery获取多种input值的简单实现方法

    获取input的checked值是否为true: 第一种: if($(“input[name=item][value=’val’]”).attr(‘checked’)==true) //判断是否已经打勾 –注:name即控件name属性,value即控件value属性 第二种: 可以不指定属性值...

    jQuery操作表单常用控件方法小结

    下面的JS代码列出了jQuery操作表单常用控件(包括select,radiobox,checkbox)的常用方法,相信一定有你需要的 操作radio的html代码 Radion &lt;input type="radio" name="rd" id="rd1" checked="checked" value=...

    jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例

    支持所有类型客户端控件的校验 支持jQuery所有的选择器语法...选择的个数支持radio/checkbox/select三种控件 支持2个控件值的比较。目前可以比较字符串和数值型、日期型。 支持服务器端校验。 支持输入格式的校验。

    jQuery 表单验证插件

    jQuery formValidator表单验证插件,它是基于jQuery类库,实现了...选择的个数支持radio/checkbox/select三种控件 支持2个控件值的比较。目前可以比较字符串和数值型。 支持服务器端校验。 支持输入格式的校验。

    jQuery formValidator表单验证插件

    jQuery formValidator表单校验插件支持的验证功能: ...选择的个数支持radio/checkbox/select三种控件 支持2个控件值的比较。目前可以比较字符串和数值型。 支持服务器端校验。 支持输入格式的校验。

    jQuery formValidator表单校验插件ver2.9.1

    、FunctionValidator (允许用户利用外部函数进行校验) InputValidator: 值的大小(数值型和字符型)范围、值的长度、选择个数(针对checkbox、radio、select) 以上都是个区间范围,大于、小于设定值...

    uichoose是一款基于jquery的列表选择美化插件

    ui-choose是一款基于jquery的列表选择美化插件。ui-choose可用于选项不太多的select、radio、checkbox等,提升用户体验。

    星号投票、标尺选择器等四款实用jQuery代码.rar

    这几款插件都相当实用,而且作者完成的相当漂亮,基本上都兼容ie6/7/8、firefox2/3、Opera、safari等众多... 四、表单编辑器,支持text、textarea、select、checkbox、radio控件,鼠标点击后展开内容,默认是合拢状态;

    jQuery formValidator表单验证插件示例源码

    jQuery formValidator表单验证插件示例源码 ...选择的个数支持radio/checkbox/select三种控件 支持2个控件值的比较。目前可以比较字符串和数值型。 支持服务器端校验。 支持输入格式的校验。

    JQuery&CSS;&CSS;+DIV实例大全.rar

    18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery...

    一个基于jquery的页面表单草稿自动保存代码

    支持input type为 text,textarea,checkbox,radio,select,password,hidden的草稿自动保存 hidden的特殊性,因为hidden要手动触发change事件,当值改变的时候要 手动代码 .change() 触发一下才会保存相应的草稿 要实现...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正CheckBox控件的CheckedChanged事件会被触发两次的BUG(Data PostBack-&gt;AutoPostBack, Event PostBack-&gt;EnablePostBack)。 -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性...

    ExtAspNet_v2.3.2_dll

    -修正CheckBox控件的CheckedChanged事件会被触发两次的BUG(Data PostBack-&gt;AutoPostBack, Event PostBack-&gt;EnablePostBack)。 -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性...

    jQuery 表单验证扩展(三)

    同时也添加了对radio,checkbox,select 元素的验证。当然对于时间的验证仍没有解决,后续过程中会继续补充! (二). 验证参数的设计 onEmptyText: 当输入内容为空的时候显示文本 onEmptyClass: 当输入内容为空的...

    jQuery Html控件基本操作(日常收集整理)

    闲来无聊,收集总结一下jQuery常用操作,希望对新手有用。 基于jquery 1.3.2 &lt;!--[removed][removed]--&gt; &lt;!--[removed][removed]--&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquer

    JEECG快速开发平台 v4.0

    技术点九:自定义表单,支持用户自定义表单布局,支持单表、列表、Select\\Radio\\Checkbox\\PopUP\\Date等特殊控件 技术点十:查询过滤器:查询功能自动生成,后台动态拼SQL追加查询条件;支持多种匹配方式(全匹配...

Global site tag (gtag.js) - Google Analytics