javascript - 根据单选按钮的状态变化使子内容出现/消失

Question

这是 this one的续题 。较早的问题是在复选框上。但是后来我根据要求把check box改成了radio buttons。

现在我需要显示子单选按钮并在母单选按钮处于事件状态时更改背景颜色。一旦它变为非事件状态，我需要隐藏子单选按钮并将背景颜色也更改为白色。

这是我的 JSFIDDLE和 HTML 代码，

PS:不要介意类名。

 <div class="newsletter-box unchecked">    
     <span class="newsletter-checkbox-wrapper">
         <input id="bonus-credit-checkbox" name="newsletter-checkbox" type="radio" value="" />
         <label for="bonus-credit-checkbox">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-female" name="newsletter-gender" type="radio">
             <label for="newsletter-female">Women</label>
         </span>
         <span class="gender-radio">
             <input id="newsletter-male" name="newsletter-gender" type="radio">
             <label for="newsletter-male">Men</label>
         </span>

     </span>    

 </div>

 <div class="newsletter-box-daily unchecked">

     <span class="newsletter-checkbox-wrapper">

         <input id="daily-checkbox" name="newsletter-checkbox" type="radio" value="">
         <label for="daily-checkbox">Offers of the day</label>

         <span class="daily-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
         </span>

     </span>

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

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

     </span>    

 </div>

Answer 1

我想这对你有帮助

$('.newsletter-box').change(function(){console.log('changed')})