如果显示“其他",则显示/隐藏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屋!