2

这是这个问题的一个继续问题。前面的问题是在复选框上。但是后来我根据要求将复选框更改为单选按钮。

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

这是我的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>
4

2 回答 2

1

我检查了你的小提琴。

这是我的解决方案。核实。告诉我需要做哪些改变。 演示

查询

$('#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'));
});
于 2013-07-30T07:21:58.837 回答
1

我认为这可以帮助你

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

于 2013-07-30T06:26:42.817 回答