2阵列工作为1

我有两个单独的单选按钮阵列，应该表现得好像他们一样。目前，我只有一种方式。我有一个YouTube video showing my problem。2阵列工作为1

我有两个互斥的数组，我希望他们一起作为一个数组一起工作的用户。例如，如果在一个数组中选中了一个单选按钮“，我不希望其他数组的单选按钮被选中，但未选中。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>

来源

2013-05-12 ryanjohnsond

UI-wise，单选按钮组*必须*选择一个项目，一旦选择了选项，就不应该选择它。这足够糟糕，可以有一个未经检查的默认状态;更糟糕的是，在技术上可能再次取消选中它。不要这样做。如果两组单选按钮的行为如同一个，**使它们成为一个单选按钮组。** – deceze 2013-05-12 06:41:42

尝试此：

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; 
    }

演示：http://jsfiddle.net/DpbMB/

你并不需要测试刚点击的无线电是否被选中，因为单选按钮，你知道他们当点击事件发生时将检查（有没有办法取消他们通过点击除了通过点击组中的另一个，然后它是另一个获得该事件）。

当单击每月单选按钮时，将遍历所有每周单选按钮并将其设置为不被检查。当任何每周收音机点击时，只需取消选中每月一个。

只有当存在多个具有相同名称的元素时才能使用数组式访问，因此访问每月按钮时不要使用[i]。

在我看来，虽然只是制作同一个组的每月按钮部分会更容易，并给它一个适当的值，您可以测试服务器端。

来源

2013-05-12 04:03:54 nnnnnn

谢谢！好的...所以当我点击每月收音机时，循环访问每周数组，并将任何选中的项设置为false。这很清楚。由于每月只有一个按钮，我不需要每月编写[0]，或者循环访问一个数组;在这种情况下，我不能只使用名称=值对。再次感谢 – ryanjohnsond 2013-05-12 04:16:09

。为什么我的代码之前不工作？ – ryanjohnsond 2013-05-12 06:11:09

你每月[i]'试图访问'每月'作为一个类似数组的对象，当它不是，你有'weekly.checked'试图访问'每周'作为一个非数组类似的对象它它不是。 – nnnnnn 2013-05-12 06:55:56

尝试为您monthlyPlan（）函数如下：

function monthlyPlan(){ 
    /*for(var i=0; i<document.deliveryForm.monthly.length;++i) 
     { 
     if(document.deliveryForm.monthly.checked== true) 
      document.deliveryForm.weekly.checked = false;  
     } 
    */ 
     alert(document.deliveryForm.monthly.length); // will say undefined 
     if (document.deliveryForm.monthly.checked) 
     { 
      for (var k = 0; k < document.deliveryForm.weekly.length; ++k) 
      { 
       document.deliveryForm.weekly[k].checked = false; 
      } 
     } 
    }

看来，当你只有在组中有一个单选按钮，DOM不会把它当作一个阵列。

编辑：其实，nnnnnn的回答更好。没有保留冗余的if语句。

来源

2013-05-12 04:04:22 0xbe5077ed

>>看起来，当组中只有一个单选按钮时，DOM不会将它当作一个数组来处理>> 我对此感到惊讶。显示它只是作为一个Name = Value对来读取。:) – ryanjohnsond 2013-05-12 04:24:13

顺便说一句。为什么我的原始代码不能将每周数组设置为未检查？ – ryanjohnsond 2013-05-12 06:11:56

2阵列工作为1

回答

相关问题