radio单选按钮组操作
Posted 花雨伞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了radio单选按钮组操作相关的知识，希望对你有一定的参考价值。
radio单选按钮组操作与checkbox复选组操作不同, 因为在一组单选按钮中, 你只要选择了其中一个(表现为checked=ture), 那么其他按钮会自动设置为fasle, 这里不留意就会产生bug, 关键是要搞清楚流程的控制。
比如现在有一个需求是通过一个toggle开关来动态切换两个按钮：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> button { cursor: pointer; } </style> </head> <body> <div> <label for="">姓别</label> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="female">女 </div> <div> <button>toggle</button> </div> <div> <button>选择第一个</button> </div> <div> <button>第二个</button> </div> <div> <button>不选第一个</button> </div> <div> <button>不选第二个</button> </div> </body> <script type="text/javascript">var inputs = document.getElementsByName(‘sex‘); var index = 0; inputs[index].checked = true; var button1 = document.getElementsByTagName(‘button‘)[0]; var button2 = document.getElementsByTagName(‘button‘)[1]; var button3 = document.getElementsByTagName(‘button‘)[2]; var button4 = document.getElementsByTagName(‘button‘)[3]; var button5 = document.getElementsByTagName(‘button‘)[4]; button1.onclick = function() { var inputs = document.getElementsByName(‘sex‘); for (var i = 0; i < inputs.length; i++) { if(inputs[i].checked==false) { inputs[i].checked = true; //这里有个坑啊, 在单选按钮中选择其中一个, 其他会自动为false, 这样循环就会有问题 break; //当设置一个为true时应该跳出循环 } else if(inputs[i].checked==true) { inputs[i].checked = false; } } console.log(inputs[0].checked); //false console.log(inputs[1].checked); //true } button2.onclick = function () { inputs[0].checked = true; } button3.onclick = function () { inputs[1].checked = true; } button4.onclick = function() { inputs[0].checked = false; } button5.onclick = function() { inputs[1].checked = false; } </script> </html>
重点是当设置一个为true了之后, 应该跳出循环。而且用radio按钮组做这种切换只适用于只有两个radio的情况, 如有多个使用checkbox逻辑会更简单
以上是关于radio单选按钮组操作的主要内容，如果未能解决你的问题，请参考以下文章
html中<radio>单选按钮控件标签用法解析及如何设置默认选中
Angular Material Design：要垂直对齐的单选按钮组
单选按钮组在 Chrome 中有价值，但在 Firefox 中没有