1

理想的情况是<div class="resp">在每个单选按钮被选中时显示其下方，并且每个单选按钮<div class="resp">包含不同的内容。When the next radio btn is selected, the previous <div class="resp">should be hidden and the selected radio btn should have the respective <div class="resp">shown below. 对于每个问题，应该同时显示 1 个响应，当我点击 Q2 收音机 btn 时，应该显示一个 Q1 响应。

目前的情况是我只能在选择时显示所有 div 类，但无法根据需要将它们隐藏起来。

Javascript

$(".resp").hide();

$(".radioBtn").change(function(){
    if($(this).attr("checked")) {
        $(this).parent().next().show().addClass('expand');
    };
});

HTML

<div class="span9">

            <div class="qnstitle">Q1. Lorem ipsum dolor sit amet</div>
            <label class="radio">
                <input name="qns1" class="radioBtn" type="radio" value="A">a) asdf
            </label>
            <div class="resp" data-qns="qns1">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet ligula mi. Aenean eu magna quam. In ultrices nisi non tellus molestie ut mattis turpis convallis. </p>
            </div>

            <label class="radio">
                <input name="qns1" class="radioBtn" type="radio" value="B">b) bsdf
            </label>
            <div class="resp" data-qns="qns1">
                <p>Proin porta, ante eu feugiat facilisis, nulla erat porta dui, sed pellentesque orci sapien quis libero. Nam nec nibh metus, nec luctus massa.</p>
            </div>

            <label class="radio">
                <input name="qns1" class="radioBtn" type="radio" value="C">c) csdf
            </label>
            <div class="resp" data-qns="qns1">
                <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem. Fusce ut metus a dui egestas congue quis quis augue. Suspendisse sed nunc sed nulla volutpat pharetra at vel purus.</p>
            </div>

            <br>

            <div class="qnstitle">Q2. Nunc sed aliquet enim.</div>
            <label class="radio">
                <input name="qns2" class="radioBtn" type="radio" value="A">a) azzzddsaf
            </label>
            <div class="resp" data-qns="qns2">
                <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem.</p>
            </div>

            <label class="radio">
                <input name="qns2" class="radioBtn" type="radio" value="B">b) bzzzzddafdsf
            </label>
            <div class="resp" data-qns="qns2">
                <p>Aenean eu metus id dui tristique aliquam. Pellentesque non scelerisque nisi. Integer a nibh orci</p>
            </div>

            <label class="radio">
                <input name="qns2" class="radioBtn" type="radio" value="C">c) czzdfasdf
            </label>
            <div class="resp" data-qns="qns2">
                <p>Pellentesque turpis libero, consectetur nec dictum eu, accumsan a sapien. Integer eget ultrices risus. Pellentesque vel orci purus.</p>
            </div>
        </div><!-- end of span9 -->
4

3 回答 3

3

try this :

$(".resp").hide();
$(".radioBtn").change(function(){
    $(".resp").removeClass('expand').hide(); // <--- add this
    if(this.checked) {
        $(this).parent().next().show().addClass('expand');
    };
});
于 2012-12-04T12:06:28.973 回答
0

如果这仍然适用，则此代码的较短版本。我问了同样的问题。这是链接。有两个工作示例，只有两个答案。

显示/隐藏 Divs 多个单选按钮 JQuery

于 2013-04-22T01:33:05.483 回答
0

简单到

$(".radioBtn").change(function(){
   $(".resp").hide();
   if($(this).attr("checked")) {
    $(this).parent().next().show().addClass('expand');
   };
});​

检查这个小提琴：http: //jsfiddle.net/rdcLg/

于 2012-12-04T12:13:38.993 回答