Binding two checkboxes together

Question

I have two checkboxes

and

Answer 1

Sure that's possible, but why would you have two checkboxes if they behave the same? Maybe one checkbox would be more convenient. :)

Well, anyway, with a piece of jQuery this should work fine. This snippet allows you to give a checkbox a group, so it automatically selects others in the same group.

Of course you could easily change this into a list of ids for example, so the behaviour doesn't need to be two ways, but I couldn't fully deduce from your question what you need. Anyway, adding extra checkboxes just requires them to have the right attribute.

Because it uses the on function this way, it should even work for checkboxes that are dynamically added.

$(document).on('click', 'input[type="checkbox"][data-group]', function(event) {
  // The checkbox that was clicked
  var actor = $(this);
  // The status of that checkbox
  var checked = actor.prop('checked');
  // The group that checkbox is in
  var group = actor.data('group');
  // All checkboxes of that group
  var checkboxes = $('input[type="checkbox"][data-group="' + group + '"]');
  // All checkboxes excluding the one that was clicked
  var otherCheckboxes = checkboxes.not(actor);
  // Check those checkboxes
  otherCheckboxes.prop('checked', checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" data-group="group1">
<input type="checkbox" data-group="group2">
<input type="checkbox" data-group="group3">
<input type="checkbox" data-group="group1">
<input type="checkbox" data-group="group2">
<input type="checkbox" data-group="group3">
<input type="checkbox" data-group="group1">

Answer 2

You can bind a change event handler on the checkboxes and based on the value of the changed checkbox, set the value of other checkboxes.

$(function() {

  $(".checkbox_class").change(function() {

    var x = this.checked;
    $(".checkbox_class").prop("checked", x);


  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checkbox1 checkbox_class" type="checkbox" name='1' id="example1" value="example1" />

<input class="checkbox2 checkbox_class" type="checkbox" name='2' id="example2" value="example2" />

Answer 3

It can be binded to change or click event

$("#example1").click(function (){
    $("#example2").click();
});

$("#example2").click(function (){
    $("#example1").click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checkbox1" type="checkbox" name='1' id="example1" value="example1"/> 
<input class="checkbox2" type="checkbox" name='2' id="example2" value="example2"/>