複選框如何通過javascript在html中觸發另一個輸入元素？

Question

我有兩個輸入複選框以及兩個文本字段：

HTML：

<form action=""> 
    <label for="male">Male</label> 
    <input onchange="genderCheck()" type="checkbox" checked="checked" name="sex" id="male" value="male"><br> 
    <label for="female">Female</label> 
    <input onchange="genderCheck()" type="checkbox" name="sex" id="female" value="female"> 

    <span id="spanIban"> 
    <br><label for="iban">IBAN:</label> 
    <input type="text" name="mIban" id="iban"> 
    </span> 
    <span id="spanBust"><br><label for="bust">Bust:</label> 
     <input type="text" name="fBust" id="bust"></span> 
</form> 

我可見的第一個複選框默認選中，以及第一個文本字段：CSS

#spanBust{visibility:hidden;} 
#spanIban{visibility:visible;} 

我希望它做到以下幾點：當其中一些複選框被觸發/未觸發下面的textareas來做到這一點（通過可視性）。 的Javascript：

var check = document.getElementById("male").defaultChecked; 

function genderCheck(){ 
    if(document.getElementById("male").checked == true) 
    { 
document.getElementById("spanIban").style.visibility="visible"; 
    document.getElementById("spanbBust").style.visibility="hidden"; 
} 
    else if(document.getElementById("female").checked == true) 
    { 
document.getElementById("spanIban").style.visibility="hidden"; 
document.getElementById("spanBust").style.visibility="visible"; 
} 
    else{ document.getElementById("spanIban").style.visibility="hidden"; document.getElementById("spanBust").style.visibility="hidden";} 
} 

我做錯了，而且不知道如何清理的東西或者說整個算法是錯誤的。

Answer 1

你的代碼中有幾個拼寫錯誤，否則它有點作用。您可以通過將所有查找存儲在變量中來幫助減少這些並提高性能。這個邏輯似乎也不太正確，如果男性沒有被選中，你只希望女性複選框切換？總之，這裏是一個新版本：

function GenderCheck(){ 
    var checkMale = document.getElementById("male"), 
     checkFemale = document.getElementById("female"), 
     iban = document.getElementById("spanIban"), 
     bust = document.getElementById("spanBust"); 

    iban.style.visibility = (checkMale.checked ? "visible" : "hidden"); 
    bust.style.visibility = (checkFemale.checked ? "visible" : "hidden"); 

} 

http://jsfiddle.net/bm2Nu/1/

Answer 2

取代：

.style.visibility="hidden"; 

上：

.style.display="none"; 

和：

.style.visibility="visible"; 

上：

.style.display="block"; 

Answer 3

嘗試按以下代碼更改

document.getElementById（「spanIban」）。style.display =「none」; document.getElementById（「spanBust」）。style.display =「inline」;

Answer 4

如果表單控件具有標識它們的名稱，則通常不需要標識。另外，如果您傳遞對從中調用偵聽器的元素的引用，則可以更輕鬆地訪問相關表單和控件。

此外，您應該對click事件調用監聽器，而不是更改事件，因爲某些瀏覽器不會在複選框上分派更改事件，直到控件失去焦點，這可能會產生令人困惑的結果。

<input onclick="genderCheck(this)" type="checkbox" checked name="sex" value="male"> 

然後在功能：

function genderCheck(element) { 

    if (element.value == 'male') { 
    element.form.mIban.style.visibility = element.checked? 'visible' : 'hidden'; 

    } else if (element.value == 'female') { 
    element.form.fBust.style.visibility = element.checked? 'visible' : 'hidden'; 
    } 
} 

如果你不想送的隱藏的輸入到服務器的價值，你也應該禁止他們時，他們是隱藏的，當讓他們他們是可見的。

Answer 5

也許你想這樣的事情（Example）

HTML元素：（genderCheck(this)）

<!-- ... --> 
<input onchange="genderCheck(this)" type="checkbox" checked="checked" name="sex" id="male" value="male" /> 
<!-- ... --> 
<input onchange="genderCheck(this)" type="checkbox" name="sex" id="female" value="female" /> 
<!-- ... --> 

JS ：

function genderCheck(el) 
{ 
    var male = document.getElementById('spanIban'), 
    maleCb = document.getElementById('male'), 
    female = document.getElementById('spanBust'), 
    femaleCb = document.getElementById('female'); 
    if(el.checked){ 
     if(el.id == 'female') { 
      female.style.display = 'block'; 
      male.style.display = 'none'; 
      maleCb.checked = false; 
     } 
     else { 
      male.style.display = 'block'; 
      female.style.display = 'none'; 
      femaleCb.checked = false; 
     } 
    } 
    else { 
     if(el.id == 'female') { 
      female.style.display = 'none'; 
      male.style.display = 'block'; 
      maleCb.checked = true; 
     } 
     else { 
      male.style.display = 'none'; 
      female.style.display = 'block'; 
      femaleCb.checked = true; 
     } 
    } 
}