根据单选按钮隐藏标签的功能

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

用合适的名字命名单选按钮 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 2

您必须在单击单选按钮后触发隐藏功能，如下所示：

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

ps: document.getElementsByClassName returns 一个数组。所以你不能使用 x.style.display='none';.

工作示例：https://jsfiddle.net/5ts0dak4/

Answer 3

试试这个。

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>

根据单选按钮隐藏标签的功能

Function that hides a label depending on radio button

html

javascript

function

radio