0

我试图仅在上一个问题选择了单选按钮“是”时才显示此页面上的网站 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>
4

4 回答 4

2

我注意到您最初将我给您的 javascript 放在页面顶部。如果您打算这样做，那么您需要将代码封装在 jquery$(document).ready(function(){ });中。当您的 html 跟随在 javascript 之后，您只需要使用准备好的文档。

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

但是，在这种情况下，我创建了另一个更好的替代方案，但不要忘记您必须最初将 web url div 设置为隐藏。另外，我强烈建议您设置更好的控件 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();
});​

现场演示

于 2012-09-05T22:31:17.647 回答
1

我创建了一个小例子：

<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 类是什么样的。祝你好运。

于 2012-09-05T22:51:10.797 回答
0

这是一个纯 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";
}

不是一个非常动态的解决方案，但它可以工作。

于 2012-09-05T22:59:18.567 回答
0

像这样的东西会将点击事件绑定到一个简单的函数来查看单选按钮并显示另一个 div。

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

运行示例代码

于 2012-09-05T23:34:29.793 回答