根据单选按钮隐藏标签的函数

Function that hides a label depending on radio button

本文关键字：函数 标签 隐藏 单选按钮      更新时间：2024-03-19

我正试图让一个函数工作，该函数根据所选单选按钮选项在表单中隐藏标签。这是我迄今为止的代码。

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';
}
}

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

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/

首先用一些不错的东西命名单选按钮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/

试试这个。

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>
相关文章：