Function 隐藏 label 取决于单选按钮

Question

I'm trying to get a function working that hides a label in the form depending on the radio button option selected. Here's my code so far.

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

You must fire your hide function after radio button clicked like this:

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

ps: document.getElementsByClassName returns an array. So you cannot use x.style.display='none'; .

Working example: https://jsfiddle.net/5ts0dak4/

Answer 2

First name the radio button ID's with something decent:

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

Then try this:

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

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

You can test it here https://jsfiddle.net/o54mzrk5/

Answer 3

Try this one.

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:

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