Change the background colour and hide the radio buttons within a particular divs when a checkbox is inactive

问题

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>

回答1:

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

回答2:

This does exactly what you want to do: http://jsfiddle.net/aMyLb/5/

$(function(){
$("#bonus-credit-checkbox").change(function(){
    if($(this).is(":checked")){
        $(".gender-radio").hide();
        $(".newsletter-box").css("background-color", "#fff");
    }
    else{
        $(".gender-radio").show();
        $(".newsletter-box").css("background-color", "#f6f2ef");
    }
});
});

回答3:

Just for all the folks with jQuery... here comes an CSS-only solution:

#bonus-credit-checkbox:not(:checked) ~ .newsletter-preference{
    display:none;
}

only works in modern browsers, don't fulfills your background-color requirement and you have to change your html a little as seen in this fiddle - as such not a real answer to your question, just a proof of concept. :-)

回答4:

CHECK OUT THIS SOLUTION. WORKING DEMO

THIS IS WORKING. You need to make the background of the main div white by default. Also you have to make the radio button div "display:none;".

JQUERY

$(function(){
    $("#bonus-credit-checkbox").change(function(){
        if($(this).is(":checked")){  
            $('.newsletter-preference').hide();         
            $('div').css('background-color', '#fff'); 
        }
        else{
            $('.newsletter-preference').show();
            $('div').css('background-color', '#f6f2ef');
        }
    });
});

来源：https://stackoverflow.com/questions/17920642/change-the-background-colour-and-hide-the-radio-buttons-within-a-particular-divs

标签

javascript

jquery

html

css

checkbox