我有两个独立的单选按钮阵列，它们的行为应该就像它们是一个一样。目前，我只能以一种方式工作。我有一个 YouTube video showing my problem .
我有两个互斥的数组，我希望它们作为一个数组一起工作给用户。例如，如果一个数组中的一个单选按钮被选中，我不希望另一个数组的单选按钮被选中，而是未被选中。JavaScript 应该取消选择另一个数组中的单选按钮，使功能看起来像用户正在使用一个一组单选按钮。两个独立的单选阵列具有不同的名称=对值。
YouTube 视频显示问题 https://www.youtube.com/watch?v=nlvzgu3pJ8A
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body{font-family:sans-serif, arial;}
th{text-align:left;}
h3,h4{margin-top:.15em; padding:0;}
</style>
<script>
function monthlyPlan(){
for(var i=0; i<document.deliveryForm.monthly.length;++i)
{
if(document.deliveryForm.monthly[i].checked== true )
document.deliveryForm.weekly.checked = false;
}
}
function weeklyPlan(){
for(var i=0; i<document.deliveryForm.weekly.length;++i)
{
if(document.deliveryForm.weekly[i].checked == true)
document.deliveryForm.monthly.checked = false;
}
}
</script>
</head>
<body>
<form name="deliveryForm" action="FormProcessor.html" method="get">
<h3>Delivery Rates</h3>
<h4>Allow users to select their desired delivery option.</h4>
<ul>
<li>Bill weekly or monthly</li>
<li>Devlivered Mon-Sat or Everyday</li>
</ul>
<p>
<strong>Billed continuously $3.50 by the Month?</strong>
<input type="radio" name="monthly" value="yes" onclick="monthlyPlan();" /> Yes
</p>
<strong>Billed by a Weekly Plan?</strong>
<table border=1 cellpadding=6>
<tr>
<th></th>
<th>4 weeks</th>
<th>13 weeks</th>
<th>26 weeks</th>
<th>52 weeks</th>
</tr>
<tr>
<th>Devlivered Mon-Sat</th>
<td><input type="radio" name="weekly" value="12.60" onclick="weeklyPlan();" />12.60</td>
<td><input type="radio" name="weekly" value="40.95" onclick="weeklyPlan();" />40.95</td>
<td><input type="radio" name="weekly" value="81.90" onclick="weeklyPlan();" />81.90</td>
<td><input type="radio" name="weekly" value="156.00" onclick="weeklyPlan();" />156.00</td>
</tr>
<th>Devlivered Everyday</th>
<td><input type="radio" name="weekly" value="13.56" onclick="weeklyPlan();" />13.56</td>
<td><input type="radio" name="weekly" value="44.07" onclick="weeklyPlan();" />44.07</td>
<td><input type="radio" name="weekly" value="88.14" onclick="weeklyPlan();" />88.14</td>
<td><input type="radio" name="weekly" value="159.74" onclick="weeklyPlan();" />159.74</td>
</tr>
</table>
</form>
</body>
</html>
最佳答案
试试这个:
function monthlyPlan() {
for (var i = 0; i < document.deliveryForm.weekly.length; ++i) {
document.deliveryForm.weekly[i].checked = false;
}
}
function weeklyPlan() {
document.deliveryForm.monthly.checked = false;
}
您不需要测试刚刚单击的单选按钮是否被选中，因为对于单选按钮，您知道它们将在单击事件发生时被选中(无法取消选中它们单击除了通过单击组中的另一个，然后它是另一个获取事件)。
点击每月单选按钮时，循环遍历所有每周单选按钮并设置为不选中。单击任何每周广播时，只需取消选中每月一次。
数组式访问仅适用于存在多个同名元素时，因此要访问每月按钮，请不要使用 [i]。
但在我看来，将每月按钮作为同一组的一部分并为其提供适当的值以便您可以在服务器端进行测试会更容易。
关于javascript - 2 个阵列作为 1 个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16504011/