如果显示“其他"，则显示/隐藏div单选或复选框已选中 [英] Show/hide div if "other" radio OR checkbox is checked

问题描述

我意识到这与已经提出的许多其他问题并没有很大的不同，但是正是这些微小的差异使我感到棘手.

I realize this is not terribly different from a lot of other questions that have been asked, but it's the little differences that's making it tricky for me.

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

Basically, I want to show or hide the text input to specify the "other" option if "other" is checked.

我的方法对于复选框似乎很好用.但是，当您取消选中另一个单选按钮时，另一个文本输入将不会隐藏.我知道收音机的性质有些不同，但是我不确定如何适应.

My approach seems to work fine for the checkboxes. But the the other text input won't hide when you uncheck the other radio button. I know the nature of radios is a little different, but I'm not sure how to accommodate this.

这是代码，我还创建了一个 jsFiddle ，您可以在其中查看它的运行情况.感谢您的帮助！

Here's the code, and I've also created a jsFiddle where you can see it in action. Thanks for your help!

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

推荐答案

这是我的方法:研究整个广播组":

This is my approach: working on the whole radio "group":

$('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');
    }
})

这篇关于如果显示“其他"，则显示/隐藏div单选或复选框已选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！