你的位置:首页 > Java教程

[Java教程]jQuery对input中radio的一些操作


通过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对象,因此不推荐使用。