Question

我意识到这与所提出的许多其他问题并没有太大的不同，但是这些差异让我觉得很棘手。

基本上，如果选中“其他”，我想显示或隐藏文本输入以指定“其他”选项。

我的方法似乎适用于复选框。但是，取消选中其他单选按钮时，其他文本输入将不会隐藏。我知道无线电的性质有点不同，但我不知道如何适应这种情况。

这是代码，我还创建了一个jsFiddle，您可以在其中查看它。谢谢你的帮助！

HTML

<fieldset>
<h1>Pick One</h1>
<p><label><input value="1" type="radio" name="options"> Chicken</label></p>
<p><label><input value="2" type="radio" name="options"> Beef</label></p>
<p><label><input value="3" type="radio" name="options"> Fish</label></p>
<p><label><input value="4" type="radio" name="options" class="other"> Other</label></p>
<p class="specify-other"><label>Please specify: <input name="options-other"></label></p>
</fieldset>

<fieldset>
<h1>Pick Several</h1>
<p><label><input value="1" type="checkbox" name="food"> Rice</label></p>
<p><label><input value="2" type="checkbox" name="food"> Beans</label></p>
<p><label><input value="3" type="checkbox" name="food"> Potatoes</label></p>
<p><label><input value="4" type="checkbox" name="food" class="other"> Other</label></p>
<p class="specify-other"><label>Please specify: <input name="options-other"></label></p>
</fieldset>

的jQuery

$('.other').click(function(){
    if ($(this).is(':checked'))
    {
        $(this).parents('fieldset').children(".specify-other").show('fast');
    } else {
        $(this).parents('fieldset').children(".specify-other").hide('fast');
    }
});

CSS

.specify-other {display: none;}

Answer 1

这是我的方法：在整个电台“小组”工作：

$('input[name=options]').click(function(){
    if ($(this).hasClass('other')) {
      $(this).parents('fieldset').children(".specify-other").show('fast');
    } else {
      $(this).parents('fieldset').children(".specify-other").hide('fast');
    }
})

Answer 2

确定每当你点击单选按钮时，它总是检查，它不像复选框那样在点击时选中或取消选中。

你检查了带有某些条件的单选按钮作为所有单选按钮的组，所以检查值是否如果选中value = 4则显示其他愿望隐藏

如果选中“其他”无线电或复选框，则显示/隐藏div

HTML

的jQuery

CSS

2 个答案: