01 | 一 、Select |
02 | jQuery获取Select选择的Text和Value: |
03 | 1. $( "#select_id" ).change( function (){ //code...}); //为Select添加事件,当选择其中一项时触发 |
04 | 2. var checkText=$( "#select_id" ).find( "option:selected" ).text(); //获取Select选择的Text |
05 | 3. var checkValue=$( "#select_id" ).val(); //获取Select选择的Value |
06 | 4. var checkIndex=$( "#select_id " ).get(0).selectedIndex; //获取Select选择的索引值 |
07 | 5. var maxIndex=$( "#select_id option:last" ).attr( "index" ); //获取Select最大的索引值 |
08 |
09 | jQuery设置Select选择的Text和Value: |
10 | 1. $( "#select_id " ).get(0).selectedIndex=1; //设置Select索引值为1的项选中 |
11 | 2. $( "#select_id " ).val(4); //设置Select的Value值为4的项选中 |
12 | 3. $( "#select_id option[text='jQuery']" ).attr( "selected" , true ); //设置Select的Text值为jQuery的项选中 |
13 |
14 | jQuery添加/删除Select的Option项: |
15 | 1. $( "#select_id" ).append( "<option value='Value'>Text</option>" ); //为Select追加一个Option(下拉项) |
16 | 2. $( "#select_id" ).prepend( "<option value='0'>请选择</option>" ); //为Select插入一个Option(第一个位置) |
17 | 3. $( "#select_id option:last" ).remove(); //删除Select中索引值最大Option(最后一个) |
18 | 4. $( "#select_id option[index='0']" ).remove(); //删除Select中索引值为0的Option(第一个) |
19 | 5. $( "#select_id option[value='3']" ).remove(); //删除Select中Value='3'的Option |
20 | 6. $( "#select_id option[text='4']" ).remove(); //删除Select中Text='4'的Option |
21 | 7. $( "#SelectID" ).remove(); //删除所有项 |
22 |
23 | 二、Checkbox |
24 | 全选/取消 |
25 | jQuery.attr 获取/设置对象的属性值,如: |
26 | $( "input[name='chk_list']" ).attr( "checked" ); //读取所有name为'chk_list'对象的状态(是否选中) |
27 | $( "input[name='chk_list']" ).attr( "checked" , true ); //设置所有name为'chk_list'对象的checked为true |
28 | $( "#img_1" ).attr( "src" , "test.jpg" ); //设置ID为img_1的<img>src的值为'test.jpg' |
29 | $( "#img_1" ).attr( "src" ); //读取ID为img_1的<img>src值 |
30 | 下面的代码是获取上面实例中选中的checkbox的value值: |
31 | <script type= "text/javascript" > |
32 | var arrChk=$( "input[name='chk_list'][checked]" ); |
33 | $(arrChk).each( function (){ |
34 | window.alert( this .value); |
35 | }); |
36 | }); |
37 | </script> |
38 |
39 | 1,获取checkbox的value |
40 | $( "#checkboxID" ).value或$( "input[type='checkbox']" ).eq(n).attr( "checked" ).value |
41 | 2,设置选中项 |
42 | $( "input[type='checkbox']" ).eq(1).attr( "checked" ) //设置第一个checkbox为选中的项 |
43 | 3,删除所有checkbox |
44 | $( "input[type='checkbox']" ).remove() |
45 | 4,checkbox方法 |
46 | $(document).ready( function () { |
47 | var check = $( "input[type='checkbox']" ); |
48 | check.each( function (n) { |
49 | check.eq(n).bind( "click" , function () { |
50 | if (check.eq(n).attr( "checked" ) != false ) { |
51 | var value = check.eq(n).val(); |
52 | alert(value); |
53 | } |
54 | else { |
55 | alert(check.eq(n).attr( "checked" )); |
56 | } |
57 | }) |
58 | }); |
59 | }); |
60 |
61 | 三、radio |
62 | 1,获取选中的value值 |
63 | $( "input[type='radio']:checked" ).val(); |
64 | 2,设置指定的项为当前选中项 |
65 | $( "input[type='radio']" ).eq(1).attr( "checked" , true ); //设置第二项为选中项 |
66 | $( "input[type='radio'][value='值']" ).attr( "checked, true" ); |
67 |
68 | 3,解决多个Radio |
69 |
70 | $( "input[type='radio'][@name='rdoTest2']" ).eq(0).attr( "checked" , true ); |