将两个复选框绑定在一起

Question

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

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