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

试试这个。

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>

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

3 个答案: