Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Craig Watson
Craig Watson
27,930 Points

Change colour of label when relevant radio button is checked?

OK, so this has me be stumped....

I am using ninja forms plugin for WordPress. I have both radio buttons and checkboxes throughout this form.

When a checkbox is checked I want to change the background colour of the label element. This I have sorted with the code below:

$(document).ready(function(){

  $('input[type="checkbox"]').click( function(){

    $this = $(this);
    $label = $this.parent();

    if( $this.prop('checked') ){
      $label.css('background', '#000000');
    } else {
      $label.css('background', '#f2f2f2');
    }

  });

});

My problem lies with implementing the code to work with a radio button. I have tried lots of ways and each time I can not get the de-selected radios to change background colour back to the original.

So here is the extensive markup that ninja forms spits out:

<div class="field-wrap list-checkbox-wrap label-above" id="ninja_forms_field_12_div_wrap" data-visible="1">
    <input type="hidden" id="ninja_forms_field_12_type" value="list">
    <input type="hidden" id="ninja_forms_field_12_list_type" value="checkbox">
    <label for="ninja_forms_field_12" id="ninja_forms_field_12_label" class="">What Categories Do You Wish To Be Involved With? <span class="ninja-forms-req-symbol"><strong>*</strong></span>              </label>
        <div class="ninja-forms-field-description">
            <p>Please select the categories you would want to write for.</p>
        </div>
        <input type="hidden" id="ninja_forms_field_12" name="ninja_forms_field_12" value="">
            <span id="ninja_forms_field_12_options_span" class="" rel="12">
                <ul>
                    <li>
                        <label id="ninja_forms_field_12_0_label" class="ninja-forms-field-12-options" style="">
                            <input id="ninja_forms_field_12_0" name="ninja_forms_field_12[]" type="checkbox" class="ninja-forms-field  ninja-forms-req ninja_forms_field_12" value="News / General" rel="12">News / General</label>
                    </li>
                    <li>
                        <label id="ninja_forms_field_12_1_label" class="ninja-forms-field-12-options" style="">
                            <input id="ninja_forms_field_12_1" name="ninja_forms_field_12[]" type="checkbox" class="ninja-forms-field  ninja-forms-req ninja_forms_field_12" value="Reviews" rel="12">Reviews</label>
                    </li>
                </ul>
    </span>
    <li style="display:none;" id="ninja_forms_field_12_template">
        <label>
            <input id="ninja_forms_field_12_" name="" type="checkbox" class="ninja-forms-field  ninja-forms-req" value="" rel="12">
        </label>
    </li>
    <div id="ninja_forms_field_12_error" style="display:none;" class="ninja-forms-field-error"></div>
</div>

You can take a quick look on CodePen if that is easier:

http://codepen.io/Craig-Watson/pen/mEzpEV?editors=1010

Hope you can help Craig

1 Answer

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

:point_right: Unlike a checkbox, a radio button is never UNclicked.

The radio button that goes off is not the one generating the event. So for radio buttons, you need to back up to the common parent, then reset the background on all the labels in the group, and finally color the one that was actually clicked on:

$(document).ready(function() {
    $('input[type="radio"]').click(function() {
        $this = $(this);
        $label = $this.parent();
        // first make ALL labels normal
        $label.parent().parent().find('label').css('background', '#f2f2f2');
        // then color just THIS one
        $label.css('background', '#000000');
    });
});

Happy coding!   -sp:sparkles:

Craig Watson
Craig Watson
27,930 Points

Thanks Steven much appreciated!!