单选按钮隐藏和显示 div jquery答案

【问题标题】：radio button hide and show div jquery单选按钮隐藏和显示 div jquery
【发布时间】：2013-07-11 12:59:14
【问题描述】：

我有一个单选按钮，有两个可能的值是或否。我想当用户按下是时会出现一个 div 并且当否时隐藏 div。

我的代码是，但它不起作用：

<script type="text/javascript">
                   $(document).ready(function() {
                   $("div.desc").hide();
                   $("input[name$='pain']").click(function() {
                   var test = $(this).val();
                   $("div.desc").hide();
                  $("#" + test).show();
                    });
                  });
               </script>

         <div id="fieldsetInner">
               <fieldset class="rightInner">
               <legend>pain</legend>
               <label for="pain" class="label2">do you feel pain ; </label>
               <input name="pain" type="radio" value="yes" id="yes" checked="checked"/> Yes  &nbsp;
               <input name="pain" type="radio" value="no"/> No

               <div id="yes" class="desc">
                <label for="pain-feature1-morph" class="label2">Morph : </label>
               </div>
          </div>

提前致谢

【问题讨论】：

您的代码中缺少关闭标记，因此请应用此标记并再次检查

标签： jquery radio-button

【解决方案1】：

你可以的

$("input#yes").click(function() {
    $("div.desc").show();
});
$("input#no").click(function() {
    $("div.desc").show();
});

【讨论】：

我想在输入中我们必须调用隐藏函数。不幸的是，我的代码出了点问题。用 span 代替 div 和在脚本中写 span.desc 是一样的吗？
非常感谢您的代码遇到的问题是我将它插入到 head 中。

【解决方案2】：

希望对你有帮助

   <input name="pain" type="radio" value="yes" id="yes"/> Yes
    <input name="pain" type="radio" value="no" id="no" /> No


    $('input:radio[name=pain]').click(function() {
         if ($('#yes').attr('checked')) {
             $('.desc').show();
           } else if ($('#no').attr('checked')) {
             $('.desc').hide();
          }

        });

【讨论】：

【解决方案3】：

您的 HTML 中有一个重复的 id，您尝试显示的 div 和“是”单选按钮的 ID 为“是”。 ID 在文档中应该是唯一的。

一旦你修复了你的 HTML，这应该可以工作 -

$(document).ready(function() {
    $("input[name$='pain']").change(function() {
        var test = $(this).val();
        $("div.desc").hide();
        if ($("div#" + test).length > 0) $("div#" + test).show();
    })
});

演示 - http://jsfiddle.net/mSLeA/

【讨论】：