最近是因为用到了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="下拉框测试" οnclick="submit1()" /> <br/>
- <input type="button" value="下拉框设置选中" οnclick="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="单选按钮测试" οnclick="submit2()" /> <br/>
- <input type="button" value="单选框设置选中" οnclick="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/>
- t;input type="button" value="多选按钮测试" οnclick="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对象,需要用$()包装起来!