如果选择单选按钮，则显示字段

Show Field if Radio Button is Selected

本文关键字：显示 字段 选择 单选按钮 如果      更新时间：2023-09-26

我正试图让此页面上的网站URL字段仅在上一个问题选择了单选按钮"是"时显示。我搜索并尝试了一些代码示例，但它们不起作用。有人给我什么建议吗？

提前感谢！

<div class="editfield">
<div class="radio">
    <span class="label">Do you have your own website? (required)</span>
    <div id="field_8"><label><input type="radio" name="field_8" id="option_9" value="Yes"> Yes</label><label><input type="radio" name="field_8" id="option_10" value="No"> No</label></div>
</div>
</div>
<div class="editfield">
<label for="field_19">Website URL </label>
<input type="text" name="field_19" id="field_19" value="" />
</div>

我注意到您最初将我给您的javascript放在了页面的顶部。如果要执行此操作，则需要将代码封装在jquery $(document).ready(function(){ });中。您只需要在javascript后面跟着html时使用文档即可。

$(function() {
    // place code here
});

然而，在这个场景中，我创建了另一个更好的替代方案，但不要忘记，您必须首先将web urldiv设置为隐藏。此外，我强烈建议您设置更好的控制id；它将使javascript更易于理解。

$('input[name=field_8]').on("click",  function(){
    var $div_WebUrl = $('#field_19').closest('.editfield');
    if($('input[name=field_8]').index(this) == 0)
        $div_WebUrl.show();
    else
        $div_WebUrl.hide();
});​

现场演示

我创建了一个小示例：

<div class="editfield">
<div class="radio">
    <span class="label">Do you have your own website? (required)</span>
    <div id="field_8"><label><input type="radio" name="field_8" id="option_9" value="Yes" onclick="document.getElementById('divUrl').style.display='block'"> Yes</label><label><input type="radio" name="field_8" id="option_10" value="No" onclick="document.getElementById('divUrl').style.display='none'"> No</label></div>
</div>
</div>
<div class="editfield" id="divUrl" style="display:none">
<label for="field_19">Website URL </label>
<input type="text" name="field_19" id="field_19" value="" />
</div>​

jsFiddle：http://jsfiddle.net/EQkzE/

注意：我已经更新了div以包含样式，因为我不知道你的css类是什么样子的。祝你好运

这里有一个纯JS解决方案：

document.getElementById("field_19").parentNode.style.display = "none";
document.getElementById("option_9").onclick = toggleURLInput;
document.getElementById("option_10").onclick = toggleURLInput;
function toggleURLInput(){
    document.getElementById("field_19").parentNode.style.display = (document.getElementById("option_9").checked)? "block" : "none";
}

不是一个非常动态的解决方案，但它是有效的。

类似的操作会将点击事件绑定到一个简单的函数，以查看单选按钮并显示另一个div。

$('#option_9').on('click', function() { 
  if ($('#option_9').is(':checked')) { 
    $('#field_19').closest('.editfield').show();
  } else {
    $('#field_19').closest('.editfield').hide();
  }
});

运行示例代码

相关文章：