CODEWITHSUNDEEP
jquerycheckbox
RKodakandla
RKodakandla

Reputation: 3484

How to check a group of checkboxes based on another group of checkboxes with JQuery

I have two separate forms on the page and both of them have a group of checkboxes.

<body>
   <form name="form1" id="form1" ...>
        <input type="checkbox" name="check1" value="Person"  />
        <input type="checkbox" name="check1" value="Dog"  />
        <input type="checkbox" name="check1" value="Cat"  />
   </form>
    <form name="form2" id="form2" ...>
        <input type="checkbox" name="check1" value="Person"  />
        <input type="checkbox" name="check1" value="Dog"  />
        <input type="checkbox" name="check1" value="Cat"  />
      </form>
  </body>

What I need here is, once the user check/unchecks any checkbox in form2, I want to do the same for corresponding checkbox in form1. If the user selects "dog" and "cat" in form2, check the same for form1 automatically. I have tried a couple of things but I can't figure out a way to set checked attribute based on the value field.

Best I could to do is to have unique ids for all checkboxes and select/unselect based on ids. But I am trying to find out if there is a better selector way.

Also, I will be glad if anyone can suggest me a better way to do what I am trying here.

-- I haven't tried this yet, but this is what I was planning to do---

   <form name="form1" id="form1" ...>
        <input type="checkbox" name="check1[]" id="form1_Person" value="Person"  />
        <input type="checkbox" name="check1[]" id="form1_Dog" value="Dog"  />
        <input type="checkbox" name="check1[]" id="form1_Cat" value="Cat"  />
   </form>
    <form name="form2" id="form2" ...>
        <input type="checkbox" name="check1[]" id="form2_Person" value="Person"  />
        <input type="checkbox" name="check1[]" id="form2_Person" value="Dog"  />
        <input type="checkbox" name="check1[]" id="form2_Person" value="Cat"  />
      </form>

once form2 checkbox is clicked, get the value, and look for checkbox in form1. If dog is selected, check $('#form1_'[dog]).checked('checked',checked)

Upvotes: 1

Views: 201

Answers (3)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

One way:

$('#form2 input[type="checkbox"]').change(function() {
    var val = $(this).val();
    $('#form1 [value="' + val + '"]').prop('checked', this.checked);
});

Two ways:

$('form input[type="checkbox"]').change(function() {
    var $element = $(this);
    var $form = $element.parent('#form1').length ? $('#form2') : $('#form1');
    var val = $element.val();
    $('[value="' + val + '"]', $form).prop('checked', this.checked);
});

demo

Upvotes: 1

wirey00
wirey00

Reputation: 33661

You can do this

$('input[type=checkbox]').change(function(){ // <-- bind to all checkboxes
    var $this = $(this);
    var x = $this.index();  // store index
    var $otherForm = $('form').not($this.parent()); // need this to synch other form
    $otherForm.find('input').eq(x).prop('checked',this.checked); // change other forms checkbox accordingly
});​

http://jsfiddle.net/wirey00/ewfrV/

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You could do

​$('#form1').on('click', 'input:checkbox', function(e) {
    var checked = $(this).is(':checked');
    var val = this.value;
    $('#form2 input:checkbox[value=' + val + ']').prop('checked', checked);
})​​​​​​​​​​​​​​​​​​​​​​​​​​​

fiddle here http://jsfiddle.net/gpsax/

Upvotes: 1

Related Questions