Check if a checkbox is checked and apply style to parent element with jquery

Question

I have a list with checkboxes like this:

<ul class="cate_select_ul">
    <li>
        <!-- outer checkbox A -->
        <label><input value="251" type="checkbox" name="post_category[]">Automobiles &amp; Transport</label>
        <ul class="children">
            <li>
                <!-- inner checkbox A -->
                <label><input value="252" type="checkbox" name="post_category[]">Car Parts</label>
            </li>
        </ul>
    </li>
    <li>
        <!-- outer checkbox B -->
        <label><input value="251" type="checkbox" name="post_category[]">Automobiles &amp; Transport</label>
        <ul class="children">
            <li>
                <!-- inner checkbox B -->
                <label><input value="252" type="checkbox" name="post_category[]">Car Parts</label>
            </li>
        </ul>
    </li>

</ul>

I want to check if the inner checkbox is checked or not. If so I want to change the style of the label around the parent outer checkbox. I tried this but it won't work properly:

if($('ul.children input[name="post_category[]"]:checked').length > 0){
$("this").parent().parent().parent().parent().children("label").css({"color":"red"});
}

Any ideas on how to make this work?

Where did you put your snippet in? You should make sure what you can get from $(this). — Sky
– Sky, Commented Feb 15, 2016 at 3:06

Josh Crozier · Accepted Answer · 2016-02-15 03:12:20Z

4

Your example isn't working because $("this") attempts to select an element with a tag type of <this>. Since that element doesn't exist, nothing is selected.

Normally, $("this") should be $(this) (since this is a keyword and not a string), however in your case, it doesn't refer to the element that you think it does because it doesn't look like there is any scope. In your case, the variable this probably refers to the window object; you can always check with console.log(this).

As for a solution, you could iterate over the elements using the .each() method in order for this to refer to the current checked input element. You also don't need to chain the .parent() method four times since you can use the .closest() method in order to select the specified closest ancestor:

Example Here

$('ul.children input[name="post_category[]"]:checked').each(function() {
  $(this).closest('.children').prev('label').css('color', '#f00');
});

Of course you don't actually need to use .each() method since you can just select the elements directly.

In the line below, the :has() selector is used in order to select ul.children elements that have checked input[name="post_category[]"] descendant elements. From there, the previous label element is selected and the corresponding CSS is changed:

Example Here

$('ul.children:has(input[name="post_category[]"]:checked)').prev('label').css('color', '#f00');

As a side note, if you want to put this in a change event listener, it would look something like this:

Updated Example

$('ul.children input[name="post_category[]"]').on('change', function() {
  $(this).closest('.children').prev('label').toggleClass('selected', this.checked);
});

edited Feb 15, 2016 at 3:12

answered Feb 15, 2016 at 3:00

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

mesqueeb Over a year ago

Not only is this a correct answer. I was able to learn so much! Thank you very much!!!

mesqueeb Over a year ago

Dear Josh, when I tried to change "has" by "not" to color just the labels of the children checkbox lists who are empty, all the outer labels became red. =S Any hints?

Josh Crozier Over a year ago

@mesqueeb Then I'm pretty sure you want to wrap :not() around :has() like $('ul.children:not(:has(...))'). So it would be $('ul.children:not(:has(input[name="post_category[]"]:checked))').prev('label').css('color', '#f00'); -> updated example.

mesqueeb Over a year ago

Thanks Josh! I got exactly what I needed with a combination of 3 of your examples: jsfiddle.net/nqcabpzo Would you deem this code good to your standards? ^^

Josh Crozier Over a year ago

@mesqueeb Yeah; that looks fine.

|

Collectives™ on Stack Overflow

Check if a checkbox is checked and apply style to parent element with jquery

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related