-1

这是我的代码的JSFIDDLE 。

在这里，当复选框未选中时，我需要将背景颜色变为白色并隐藏单选按钮。

同时，当它被选中时，我想将背景颜色显示为当前颜色并显示单选按钮

 <div class="newsletter-box">
     <span class="bonus-credit-wrapper">
         <input id="bonus-credit-checkbox" name="bonus-credit-checkbox" type="checkbox" value="" />
         <label for="bonus-credit-checkbox" class="bonus-credit-checkbox-label">Your bonus credits</label>

         <span class="bonus-credit-description">
             Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
         </span>
     </span>

     <span class="newsletter-preference">
         <span class="newsletter-preference-text">I prefer for:
         </span>

         <span class="gender-radio">
             <input checked id="newsletter-male" name="newsletter-gender" type="radio">
             <label for="newsletter-male">Women</label>
         </span>
         <span class="gender-radio">
             <input id="newsletter-female" name="newsletter-gender" type="radio">
             <label for="newsletter-female">Men</label>
         </span>

  </span>
4

4 回答 4

4

我的解决方案（小提琴）：

HTML：

<div class="newsletter-box unchecked">
    ...
</div>

JS：

$('#bonus-credit-checkbox').on('change', function() {
    $('.newsletter-box').toggleClass('unchecked', !$(this).prop('checked'));
});

CSS：

.unchecked {
    background: #fff;
}

.unchecked span.newsletter-preference { 
    display: none;
}
于 2013-07-29T09:58:43.807 回答
2

这正是您想要做的：http: //jsfiddle.net/aMyLb/5/

$(function(){
$("#bonus-credit-checkbox").change(function(){
    if($(this).is(":checked")){
        $(".gender-radio").hide();
        $(".newsletter-box").css("background-color", "#fff");
    }
    else{
        $(".gender-radio").show();
        $(".newsletter-box").css("background-color", "#f6f2ef");
    }
});
});
于 2013-07-29T09:44:35.747 回答
1

只为所有使用 jQuery 的人......这里有一个纯 CSS 的解决方案：

#bonus-credit-checkbox:not(:checked) ~ .newsletter-preference{
    display:none;
}

仅适用于现代浏览器，不满足您的背景颜色要求，您必须稍微更改您的 html，如本小提琴中所示- 因此这不是您问题的真正答案，只是一个概念证明。:-)

于 2013-07-29T15:08:34.403 回答
0

看看这个解决方案。 工作演示

这是有效的。默认情况下，您需要将主 div 的背景设置为白色。您还必须使单选按钮 div “显示：无； ”。

查询

$(function(){
    $("#bonus-credit-checkbox").change(function(){
        if($(this).is(":checked")){  
            $('.newsletter-preference').hide();         
            $('div').css('background-color', '#fff'); 
        }
        else{
            $('.newsletter-preference').show();
            $('div').css('background-color', '#f6f2ef');
        }
    });
});
于 2013-07-29T09:50:29.333 回答