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逻辑会更简单
时间： 2025-01-07 11:49:26