ラジオボタンに応じてラベルを隠す機能

Question

選択したラジオボタンオプションに応じて、フォーム内のラベルを非表示にする関数を取得しようとしています。これまでのところ私のコードです。

HTML

<form action=""> 
<input type="radio" id="test" value="first"> first<br> 
<input type="radio" id="test" value="second"> second<br> 
<input type="radio" id="test" value="third"> third 
</form> 

<label class="hidden">Hide this</label> 

Javascriptを

var rbtn = document.getElementById("test"); 
var x = document.getElementsByClassName("hidden"); 

function hidelabel() { 

    if (rbtn == 'third') { 
    x.style.display='none'; 
} 
} 

Answer 1

それをテストすることができ、ラジオボタンは次のようにクリックした後、あなたはあなたの非表示機能を発射する必要があります。

document.mainForm.onclick = function(){ 
    var radVal = document.mainForm.rads.value; 
    if (radVal == 'third') { 
     document.getElementsByClassName("hidden")[0].style.display = 'none'; 
    } 
} 

PS：配列を返しますdocument.getElementsByClassName 。したがって、x.style.display='none';は使用できません。

の作業例：https://jsfiddle.net/5ts0dak4/

Answer 2

まずまともな何かをラジオボタンのIDの名前を付ける：

<form action=""> 
<input type="radio" id="first" value="first"> first<br> 
<input type="radio" id="second" value="second"> second<br> 
<input type="radio" id="third" onclick="hide();" value="third"> third 
</form> 

<label class="hidden" id="hidden">Hide this</label> 

そして、これを試してみてください。

function hide(){ 
    var x = document.getElementById('hidden'); 

    if(document.getElementById('third').checked) { 
    x.style.display='none'; 
} 
} 

はあなたがここにhttps://jsfiddle.net/o54mzrk5/

Answer 3

はこの1つを試してみてください。

CSS：

<style type="text/css"> 
    .hidden{ display:none; } 
</style> 

HTML：

<form action=""> 
    <input type="radio" name="test" value="first" onclick="func(this, true);"> first<br> 
    <input type="radio" name="test" value="second" onclick="func(this, true);"> second<br> 
    <input type="radio" name="test" value="third" onclick="func(this, false);"> third 
</form> 

<label class="hidden">Hide this</label> 

スクリプト：

<script type="text/javascript"> 

    func = function(ctrl, visible) { 
     if(visible) 
      document.getElementsByClassName("hidden")[0].style.display='block'; 
     else 
      document.getElementsByClassName("hidden")[0].style.display='none'; 
    }; 

</script>