Jquery change checkbox when clicking other checkbox

Question

I have a list of checkboxes like this:

<input type='checkbox' name='cat' class='parent' value='cat1' />Category 1</input>
<input type='checkbox' name='foo' class='child' value='1' />SubCategory 1</input>
<input type='checkbox' name='foo' class='child' value='1' />SubCategory 2</input>

<input type='checkbox' name='cat' class='parent' value='cat2' />Category 2</input>
<input type='checkbox' name='foo' class='child' value='3' />SubCategory 3</input>
<input type='checkbox' name='foo' class='child' value='4' />SubCategory 4</input>

I would like to change the 'Category 1' checkbox to checked whenever I click it's subcategories without checking the other categories checkbox.

How can I do that?

Here is the fiddle: jsfiddle.net/xPNWu

Anup Vasudeva
– Anup Vasudeva

2013-12-30 17:19:56 +00:00
Commented Dec 30, 2013 at 17:19 — Anup Vasudeva
– Anup Vasudeva, Commented Dec 30, 2013 at 17:19

Simon Davies · Accepted Answer · 2013-12-30 17:20:00Z

2

Using the data attribute to set the cat. simply get this form the check event of the child elements:

    <input type='checkbox' name='cat' class='parent' value='cat1' id="category1" />Category 1</input>
        <input type='checkbox' name='foo' class='child' value='1' data-cat="1" />SubCategory 1</input>
        <input type='checkbox' name='foo' class='child' value='2' data-cat="1" />SubCategory 2</input>

....

    $('.child').change(function() {
       var cat = $(this).data('cat');
       $('#category' + cat).prop('checked', true);
    });

answered Dec 30, 2013 at 17:20

Simon Davies

3,6949 gold badges45 silver badges71 bronze badges

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

3 Comments

mplungjan Over a year ago

That is pretty complicated for something that simple

Simon Davies Over a year ago

probably my brain working overtime as simply not done for a while :-), i was thinking there might be more to it probably.

mplungjan Over a year ago

I think my solution is more elegant if I have to say so myself - it does assume a slight HTML change, but that is a change that makes sense anyway

mplungjan · Accepted Answer · 2013-12-30 17:46:10Z

1

I made a slight change to your markup and wrapped the sets in a div each.

Now my code will uncheck the parent too if all its child-cats are unchecked and when you check the parent, all child cats are checked/unchecked

Live Demo

$(function() {
  $(".child").on("click",function() {
      $parent = $(this).prevAll(".parent");
      if ($(this).is(":checked")) $parent.prop("checked",true);
      else {
         var len = $(this).parent().find(".child:checked").length;
         $parent.prop("checked",len>0);
      }    
  });
  $(".parent").on("click",function() {
      $(this).parent().find(".child").prop("checked",this.checked);
  });
});

edited Dec 30, 2013 at 17:46

answered Dec 30, 2013 at 17:16

mplungjan

180k29 gold badges183 silver badges246 bronze badges

1 Comment

Rafael Fonseca Over a year ago

When I click the subcategory 3 it marks the two parents... =\

Akshat Singhal · Accepted Answer · 2013-12-30 17:08:53Z

0

You can id the subCategories as cat2_1, cat2_2 etc and then access the category element by means of the subcategory element by splitting the id by _ to obtain the category id.

answered Dec 30, 2013 at 17:08

Akshat Singhal

1,81119 silver badges20 bronze badges

Comments

Dave · Accepted Answer · 2013-12-30 18:01:38Z

Other answer

$(document).ready(function () {
                $("INPUT").click(function () {              
                    if ($(this).attr("class") == "parent") {
                        var v = this.value;             
                        var check = this.checked;
                        var ok = false;

                        $("INPUT").each(function () {
                            if (v == this.value) {  
                                ok = true;
                            } else {                                
                                if (this.name=="cat") ok = false;
                                else if (ok && this.name == "foo") {
                                    this.checked=check;
                                }
                            }

                        });

                    }


                });
            });

Collectives™ on Stack Overflow

Jquery change checkbox when clicking other checkbox

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related