jQuery 操作input中radio的技巧

前端技术 2023/09/02 JavaScript

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

<html>
<head>
<title>取消</title>
<script language=\"javascript\">
function _onclick() {
$(\"input[name=\'ra\']:checked\").val();
var radios = document.getElementsByName(\"ra\");
for (i = 0; i < radios.length; i++) {
if (radios[i].checked) {
radios[i].checked=false;
break;
}
}
}
function _onclick1() {
var item = $(\"input:radio[name=\'ra\'][checked]\").val(); 
alert(item)
var radios = $(\"input[name=\'ra\']\");
for (i = 0; i < radios.length; i++) {
if (radios[i].checked) {
radios[i].checked=false;
break;
}
}
}
function _onclick2() {
var radios = $(\"input[type=\'radio\']\");
for (i = 0; i < radios.length; i++) {
if (radios[i].checked) {
radios[i].checked=false;
}
}
}
</script>
</head>
<body>
<div><ol>
<li><input type=\"radio\" name=\"ra\" value=\"1\">1</li>
<li><input type=\"radio\" name=\"ra\" value=\"2\">2</li>
<li><input type=\"radio\" name=\"ra\" value=\"3\" checked>3</li>
<li><input type=\"radio\" name=\"ra\" value=\"4\">4</li>
<li><input type=\"radio\" name=\"ra\" value=\"5\">5</li>
<li><input type=\"radio\" name=\"ra\" value=\"6\">6</li>
<li><input type=\"radio\" name=\"ra\" value=\"7\">7</li>
<li><input type=\"radio\" name=\"ra\" value=\"8\">8</li> 
</ol></div>
<div><ol>
<li><input type=\"radio\" name=\"ra1\" value=\"1\">1</li>
<li><input type=\"radio\" name=\"ra1\" value=\"2\">2</li>
<li><input type=\"radio\" name=\"ra1\" value=\"3\" checked>3</li>
<li><input type=\"radio\" name=\"ra1\" value=\"4\">4</li>
<li><input type=\"radio\" name=\"ra1\" value=\"5\">5</li>
<li><input type=\"radio\" name=\"ra1\" value=\"6\">6</li>
<li><input type=\"radio\" name=\"ra1\" value=\"7\">7</li>
<li><input type=\"radio\" name=\"ra1\" value=\"8\">8</li> 
</ol></div>
<input type=\"button\" value=\"GetValue1\" onclick=\"_onclick()\" />
<input type=\"button\" value=\"GetValue2\" onclick=\"_onclick1()\" />
<input type=\"button\" value=\"GetValue3\" onclick=\"_onclick2()\" />
<script src=\"http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js\" type=\"text/javascript\"></script>
</body>
</html>

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

以上所述是小编给大家介绍的jQuery 操作input中radio的技巧，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/4429

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案