JavaScript有條件 - 取消選中隱藏div中的單選按鈕？

Question

我試圖建立一個形式的條件式單選按鈕，其實我修改一些JavaScript我發現這裏看起來像這樣：

function hideStuff(id) { 
    document.getElementById('flatDiv').style.display = 'none'; 
    document.getElementById('salaryDiv').style.display = 'none'; 
} 

function checkType(selectedType) { 

    if (selectedType == 'flat') { 
     document.getElementById('flatDiv').style.display = 'block'; 
     document.getElementById('salaryDiv').style.display = 'none'; 
    } else { 
     document.getElementById('flatDiv').style.display = 'none'; 
     document.getElementById('salaryDiv').style.display = 'block'; 
    } 
} 

和HTML是這樣的：

<input type="radio" name="Type" value="flat" onclick="checkType(this.value)" />Flat 
<input type="radio" name="Type" value="salary" onclick="checkType(this.value)" />Salaray 
<br /> 
<div id="salaryDiv" style="display:none;">Choose an option: 
    <input type="radio" name="salaryType" value="1x" />1x 
    <input type="radio" name="salaryType" value="2x" />2x 
    <input type="radio" name="salaryType" value="3x" />3x</div> 
<div id="flatDiv" style="display:none;">Choose an option: 
    <input type="radio" name="flatType" value="$25,000" />$25,000 
    <input type="radio" name="flatType" value="$50,000" />$50,000</div> 

jsFiddle

這所有的作品，但如果有人點擊薪水，並選擇一個選項，然後改變主意，當他們點擊扁我希望搞清楚他們之前薪酬（和副VERS所作出的任何選擇a）我嘗試了一些不起作用的東西，所以我想我會問一個知道他們在做什麼的人。謝謝。

Answer 1

我建議使用一個JavaScript庫，但我離題。我修改了代碼以包含addEvent，而不是在標記中分配事件處理程序。它看起來更乾淨。你可以使用它。

(function() { 
    var inputs = document.getElementsByTagName('input'); 
    for (var i = 0; i < inputs.length; i++) { 
     if (inputs[i].getAttribute('name') === "Type") { 
      addEvent('click', inputs[i], function (e) { 
       var source = event.target || event.srcElement; 
       checkType(source.value); 
      }); 
     } 
    } 

    function hideStuff(id) { 
     document.getElementById('flatDiv').style.display = 'none'; 
     document.getElementById('salaryDiv').style.display = 'none'; 
    } 

    // What you had before but now it clears the radios of the other type 
    function checkType(selectedType) { 
     if (selectedType == 'flat') { 
      clear("salaryType"); 
      document.getElementById('flatDiv').style.display = 'block'; 
      document.getElementById('salaryDiv').style.display = 'none'; 
     } else { 
      clear("flatType"); 
      document.getElementById('flatDiv').style.display = 'none'; 
      document.getElementById('salaryDiv').style.display = 'block'; 
     } 
    } 

    function clear(str) { 
     for (var i = 0; i < inputs.length;i++) { 
      if (inputs[i].getAttribute('name') === str) { 
       inputs[i].checked = false; 
      } 
     } 
    } 
})(); 
function addEvent(evnt, elem, func) { 
    if (elem.addEventListener) // W3C DOM 
     elem.addEventListener(evnt,func,false); 
    else if (elem.attachEvent) { // IE DOM 
     elem.attachEvent("on"+evnt, func); 
    } 
    else { // No much to do 
     elem[evnt] = func; 
    } 
} 

所有東西都包裹在一個匿名函數中以減少全局性。 addEvent函數允許跨瀏覽器添加動態事件偵聽器。

這個JavaScript對應於以下標記：

<input type="radio" name="Type" value="flat" id="flatRadio" />Flat 
<input type="radio" name="Type" value="salary" id="salaryRadio" />Salary 
<br /> 
<div id="salaryDiv" class="options">Choose an option: 
    <input type="radio" name="salaryType" value="1x" />1x 
    <input type="radio" name="salaryType" value="2x" />2x 
    <input type="radio" name="salaryType" value="3x" />3x 
</div> 
<div id="flatDiv" class="options">Choose an option: 
    <input type="radio" name="flatType" value="$25,000" />$25,000 
    <input type="radio" name="flatType" value="$50,000" />$50,000 
</div> 

我也刪除內嵌樣式並提出被稱爲CSS類options設置爲display:none。

.options { 
    display:none; 
} 

jsFiddle

Answer 2

我使用的技術是添加一個「標誌」類（即虛擬類）到選定的選項。這使您能夠對所選選項進行樣式設置，並且可以輕鬆清除它。

1. CSS

#flatDiv, #salaryDiv{display: block;} 
.selected{ display: none; } 

1. 的JavaScript

   function hideStuff(id) { 
       document.getElementById('flatDiv').className ="selected"; 
       document.getElementById('salaryDiv').className ="selected"; 
   } 
   
   function checkType(selectedType){ 
       var fd = document.getElementById('flatDiv'); 
       var sd = document.getElementById('salaryDiv'); 
   
       if (selectedType == 'flat'){ 
        fd.className = ""; // clear it 
        sd.className = "selected"; 
       } else{ 
        fd.className = "selected"; 
        sd.className = ""; // clear it 
       } 
   } 
   

Answer 3

我建議：

function hideStuff(elClassName) { 
    // call the function to hide specific elements (based on a class-name) 
    var els = document.getElementsByClassName(elClassName); 
    for (var i = 0, len = els.length; i < len; i++){ 
     // iterate through those elements and hide them 
     els[i].style.display = 'none'; 
    } 
} 

function checkType(selectedType) { 
    var toggles = document.getElementsByClassName('toggle'), 
     inputs; 
    for (var i = 0, len = toggles.length; i < len; i++){ 
     // sets the current node's display to 'block' if the id matches, and 'none' if not 
     toggles[i].style.display = toggles[i].id == selectedType + 'Div' ? 'block' : 'none'; 
     if (toggles[i].style.display == 'none') { 
      // if an element is hidden, the radios therein are all unchecked 
      inputs = toggles[i].getElementsByTagName('input'); 
      for (var c = 0, cLen = inputs.length; c < cLen; c++){ 
       inputs[c].checked = false; 
      } 
     } 
    } 
} 

hideStuff('toggle'); 

JS Fiddle demo。

這當然是基於稍微修改的HTML，在這種情況下使用類來標識相關元素，但可以使用data-*屬性代替。

document.getElementsByClassName()是，不幸的是，不是所有的瀏覽器支持，特別是Internet Explorer不支持它（according to MDN和Quirksmode），直到版本9

Answer 4

創建功能clearRadio並將其分配給無線輸入flat和salary與onchange屬性。

HTML

<input type="radio" name="Type" value="flat" onclick="checkType(this.value)" onchange="clearRadios('flatDiv')" />Flat 
    <input type="radio" name="Type" value="salary" onclick="checkType(this.value)" onchange="clearRadios('salaryDiv')" />Salary 

的JavaScript

function clearRadios(id) { 
    var Radios = document.getElementById(id).getElementsByTagName('input'); 
    for (var i = 0; i < Radios.length; i++) { 
     if (Radios[i].type == 'radio') { 
      Radios[i].checked = false; 
     } 
    } 
} 

功能會發現與傳遞id在div內的所有無線電輸入和清除它們。

jsfiddle