显示/隐藏div如果选中了“其他”收音机或复选框

问题描述

|| 我意识到这与已经提出的许多其他问题没有太大的不同，但是正是这些微小的差异使我感到棘手。 基本上，如果选中了“其他”，我想显示或隐藏文本输入以指定“其他”选项。 对于复选框，我的方法似乎很好用。但是当您取消选中其他单选按钮时，其他文本输入将不会隐藏。我知道收音机的性质有些不同，但是我不确定如何适应这种情况。 这是代码，我还创建了一个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;}

    

解决方法

这是我的方法：研究整个广播“组”：

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

    ,好 每当您单击单选按钮时，它始终处于选中状态，而不是像单击复选框一样选中或取消选中它。 您已将具有某些条件的单选按钮作为所有单选按钮的组进行检查，因此请检查值，如果选中value = 4，则显示其他愿望隐藏