当复选框处于非活动状态时，更改背景颜色并隐藏特定div中的单选按钮 [英] Change the background colour and hide the radio buttons within a particular divs when a checkbox is inactive

问题描述

这是 JSFIDDLE 我的代码。

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

同时当检查我想显示背景颜色作为当前的一个，并显示单选按钮

 < div class = newsletter-box> 
< span class =bonus-credit-wrapper> 
< input id =bonus-credit-checkboxname =bonus-credit-checkboxtype =checkboxvalue =/> 
< label for =bonus-credit-checkboxclass =bonus-credit-checkbox-label>您的奖金积分< / label> 
 
< span class =bonus-credit-description> 
 Sed ut persicicatis 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>我更喜欢：
< / span> 
 
< span class =gender-radio> 
< input checked id =newsletter-malename =newsletter-gendertype =radio> 
< label for =newsletter-male>女性< / label> 
< / span> 
< span class =gender-radio> 
< input id =newsletter-femalename =newsletter-gendertype =radio> 
< label for =newsletter-female>男性< / label> 
< / span> 
 
< / span> 
  
 
 
解决方案
 //jsfiddle.net/aMyLb/9/rel =nofollow> fiddle ）：
 
 
 
 HTML：
 < div class =newsletter-box unchecked> 
 ... 
< / div> 
  
 JS：
  $（'＃bonus-credit-checkbox'）。on（'change'，function（）{
 $（'。newsletter-box'）。toggleClass（'unchecked'，！$ this）.prop（'checked'））; 
}）; 
  
 CSS：
 code> .unchecked {
 background：#fff; 
} 
 
 .unchecked span.newsletter-preference {
 display：none; 
} 
  
 
Here is a JSFIDDLE to my code.

Here, when the check box is unchecked I need to turn the back ground colour to white and hide the radio buttons.

Meanwhile when it is checked I want to show the background colour as the current one and show the radio buttons
 <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>

解决方案
And my solution (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;
}


                        
这篇关于当复选框处于非活动状态时，更改背景颜色并隐藏特定div中的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！