Question

这是 this one 的问题。早先的问题是在复选框上。但后来我根据要求将复选框更改为单选按钮。

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

以下是我的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')})

Answer 2

我检查了你的FIDDLE。

这是我的解决方案。核实。告诉我需要做些什么改变。 DEMO

JQUERY

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


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

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

2 个答案: