Question

在我的HTML代码中，我有两个输入：

Yes <input type="radio" onclick="RadioCheck()" name="radio" id="yes" /> 
No <input type="radio" onclick="RadioCheck()" name="radio" id="no"  />

现在我有一个默认情况下的div，因为它的样式显示为内联，我希望当我单击否时它会使样式显示为none而yes会使其内联，所以我创建了这个函数

function RadioCheck() {
    var Radioclick = document.getElementById("hiddendiv").style.display;
    if (Radioclick == "inline") {
        document.getElementById("hiddendiv").style.display = "none";
    }
    if (Radioclick == "none") {
        document.getElementById("hiddendiv").style.display = "inline";
    }
}

现在的问题是我不知道该怎么做，当我点击是它会切换到内联，如果我再次点击是它将保持内联而不是将其切换为无，我知道我的代码只是切换inline to none，但是我希望它在点击是收音机时使其成为内联，而在没有两个功能时没有点击收音机时没有。

Answer 1

也许您可以将变量传递给RadioCheck（）函数？

Yes <input type="radio" onclick="RadioCheck(true)" name="radio" id="yes" /> 
No <input type="radio" onclick="RadioCheck(false)" name="radio" id="no"  />

然后在你的javascript中：

function RadioCheck(isYes){
    if(isYes){
        document.getElementById("hiddendiv").style.display = "inline";
    }else{
        document.getElementById("hiddendiv").style.display = "none";
    }
}

Answer 2

如果您希望通过选中的单选按钮确定div的显示，则条件应该在收音机上检查：

if the Yes radio button is checked
    show the div
if the No radio button is checked
    hide the div

所以：

if (document.getElementById("yes").checked) {
    document.getElementById("hiddendiv").style.display = "inline";
}
if (document.getElementById("no").checked) {
    document.getElementById("hiddendiv").style.display = "none";
}

有关工作示例，请参阅http://jsfiddle.net/nivas/39cMn/

Answer 3

如果您向单选按钮添加value属性并将单选按钮ID传递给function RadioCheck，则可以使用按钮值来简化代码。例如：

<form>
   Yes <input type="radio" onclick="RadioCheck('yes')" name="radio" id="yes" value="inline" /> 
   No <input type="radio" onclick="RadioCheck('no')" name="radio" id="no"  value="none" />
</form>

<div id="hiddendiv" style="display:none">
   this div can be hidden and revealed
</div>

<script>
   function RadioCheck(id) {
       var value = document.getElementById(id).value;
       document.getElementById("hiddendiv").style.display = value;
   }
</script>

Javascript收音机显示无/内联

3 个答案: