Binding two checkboxes together

I have two checkboxes

<input class="checkbox1" type="checkbox" name='1' id="example1" value="example1"/> 

and

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

Is it possible to connect these two checkboxes, so that whatever happens to the 'checked' attribute of one checkbox also happens to the other? It needs to work for

  1. User changes the checked status

  2. Some javascript function changes the checked status

My actual example is very complex and has many many checkboxes. So I am looking for a solution where I can just determine a connection between two checkboxes and never have to think about it again. thanks carl

Answers:

Answer

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

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

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"/>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.