javascript - 当复选框处于非事件状态时，更改背景颜色并隐藏特定 div 中的单选按钮

Question

这是一个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>

Answer 1

我的解决方案(fiddle):

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;
}