jQuery对input中radio的一些操作

时间:2022-09-11 08:03:54

通过jQuery获取页面中的所有radio对象,遍历页面中的radio,取消选中的标签,因为使用到jQuery时间,因此引用到了网上公共的js,这只是本人的一些总结,大神勿喷。

 1 <html>
 2 <head>
 3 <title>取消</title>
 4 <script language="javascript">
 5 function _onclick() {
 6 $("input[name='ra']:checked").val();
 7     var radios = document.getElementsByName("ra");
 8     for (i = 0; i < radios.length; i++) {
 9         if (radios[i].checked) {
10             radios[i].checked=false;
11             break;
12         }
13     }
14 }
15 function _onclick1() {
16  var item = $("input:radio[name='ra'][checked]").val(); 
17 alert(item)
18     var radios = $("input[name='ra']");
19     for (i = 0; i < radios.length; i++) {
20         if (radios[i].checked) {
21             radios[i].checked=false;
22             break;
23         }
24     }
25 }
26 function _onclick2() {
27     var radios = $("input[type='radio']");
28     for (i = 0; i < radios.length; i++) {
29         if (radios[i].checked) {
30             radios[i].checked=false;
31            
32         }
33     }
34 }
35 </script>
36 </head>
37 <body>
38 <div><ol>
39  <li><input type="radio"  name="ra" value="1">1</li>
40  <li><input type="radio"  name="ra" value="2">2</li>
41  <li><input type="radio"  name="ra" value="3" checked>3</li>
42  <li><input type="radio"  name="ra" value="4">4</li>
43  <li><input type="radio"  name="ra" value="5">5</li>
44  <li><input type="radio"  name="ra" value="6">6</li>
45  <li><input type="radio"  name="ra" value="7">7</li>
46  <li><input type="radio"  name="ra" value="8">8</li> 
47 </ol></div>
48 <div><ol>
49  <li><input type="radio"  name="ra1" value="1">1</li>
50  <li><input type="radio"  name="ra1" value="2">2</li>
51  <li><input type="radio"  name="ra1" value="3" checked>3</li>
52  <li><input type="radio"  name="ra1" value="4">4</li>
53  <li><input type="radio"  name="ra1" value="5">5</li>
54  <li><input type="radio"  name="ra1" value="6">6</li>
55  <li><input type="radio"  name="ra1" value="7">7</li>
56  <li><input type="radio"  name="ra1" value="8">8</li> 
57 </ol></div>
58 <input type="button" value="GetValue1" onclick="_onclick()" />
59 <input type="button" value="GetValue2" onclick="_onclick1()" />
60 <input type="button" value="GetValue3" onclick="_onclick2()" />
61 <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
62 </body>
63 </html>

文中使用3中获取radio对象的方式,前两种使用的比较多,第三种直接通过type标签获取对象,有可能获取到页面中所有的radio对象,因此不推荐使用。