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

回答

相關問題