Question

我有一个带有两个可能值为yes或no的单选按钮。我希望当用户按下时，将出现一个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>

提前致谢

Answer 1

你可以做到

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

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

        });

Answer 3

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

修复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/

单选按钮隐藏并显示div jquery

3 个答案: