Binding two checkboxes together

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

User changes the checked status
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

Sure that's possible, but why would you have two checkboxes if they behave the same? Maybe one checkbox would be more convenient. :) — GolezTrol, Dec 27 '15 at 09:01
Yes. In many ways. Some declarative, some imperative. Imperative involves writing JS to do that, while declarative usually requires some JS framework. There's no native way to "connect" them and "never have to think about it again" — haim770, Dec 27 '15 at 09:02
@carl No idea. Maybe people disagree in principle with the idea of binding checkboxes together? If so, that's a terrible reason for downvotes--that's simply not the way to express disagreement with a UI feature. (Also, I don't understand why people assume that this is automatically a bad idea.) — Kyle Strand, Jun 15 '16 at 16:03
@GolezTrol Why would you assume that there's never a reason for two checkboxes with identical behavior when you haven't even seen the UI in question? — Kyle Strand, Jun 15 '16 at 16:12
@KyleStrand. If you look really, really closely, you'll see I didn't say there is "never a reason". I just suggested that it's just unconventional to have two separate controls that essentially do the same, and *maybe it could be* more convenient to use just one instead of finding a complex jQuery solution. — GolezTrol, Jun 16 '16 at 07:59
@GolezTrol "Never a reason" isn't a direct quote, obviously, and perhaps I'm reading too much into what you said--but the fact that you think your comment, which amounts to "I disagree with the premise of the question," is an "integral part" of your answer and worth keeping as a comment *and* part of your answer, does make it seem like you believe pretty strongly (without looking at OP's GUI) that this is a poor design choice. And in general, I find the trend of "why would you do that?" comments on questions on SO pretty annoying. — Kyle Strand, Jun 16 '16 at 15:44
@KyleStrand I don't think it's a trend. I at least have been doing this since I started here, 5.5 years ago. It's not just criticism, but years of experience taught me that there is rarely a use for this, so I'm just curious if OP thought it through. I think I'm pretty fair in the fact that I don't *just* criticize this method, but also provide a complete answer, including working code, within the boundaries of the question. So frankly, I don't know what your problem is. But feel free to provide a better answer, and by all means, omit any criticism. I'm sure OP would learn a lot from that. — GolezTrol, Jun 16 '16 at 22:24
@GolezTrol I appreciate that you *did* provide a working answer. And perhaps "trend" was the wrong word--I suppose I just meant "common practice." It still bothers me that so many people on the site (you included) respond to reasonable questions by suggesting that the *problem itself* somehow indicates that the OP doesn't know what they're doing, or that the critic knows better. I don't care how many years of experience you have--by indicating that you know better than OP how to craft this *particular GUI* without even *seeing* it, you seem quite arrogant. — Kyle Strand, Jun 16 '16 at 22:24
@KyleStrand I'm sorry you feel that way. I'm not saying I know everything better, but I've seen a lot, and learned from a *lot* of mistakes over the years. I'm just here to help other make slightly less of those mistakes. And really, I never said the whole idea is wrong. I was just looking for a use case. Your question of yesterday contains such a use case, and I probably wouldn't have any reason to post a comment like this under your question. Anyway, my criticism is just meant to start a dialog from which OP and I could both benefit. — GolezTrol, Jun 16 '16 at 22:38
@GolezTrol Fair enough. Sorry for being...prickly. It was not clear to me that your comment was genuinely intended to *start* a dialogue; I interpreted it rhetorically. (To my ears "maybe one checkbox would be more convenient. :)" seems somewhat condescending, but I realize now you probably didn't mean it that way.) — Kyle Strand, Jun 16 '16 at 22:44

GolezTrol · Answer 1 · 2016-06-16T08:01:57.300

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

thanks for your answer... if there is another javascript function, which changes the checked status of a box, this solution does not work. It only works if the user clicks on one of the group boxes — carl, Dec 27 '15 at 20:38
Why would you duplicate your comment in your answer, when the comment has nothing to do with solving the OP's problem? — Kyle Strand, Jun 15 '16 at 16:14
Because I think helping someone is more than giving just a technical solution. If I think there is a better alternative, I want them to at least consider that. Maybe I should have deleted the comment, but regardless I think that paragraph is an integral part of my answer — GolezTrol, Jun 16 '16 at 08:04

score 3 · Answer 2 · answered Dec 27 '15 at 09:06

3

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

answered Dec 27 '15 at 09:06

void

36,090
8
62
107

hi void... this solution only works if the user changes the state of one of the boxes... it doesn't work if another javascript function changes the state – carl Dec 27 '15 at 20:59
@carl did you test this suggested answer? It seems that the .change() function should do what you. Perhaps this answer (https://stackoverflow.com/questions/13418963/jquery-onchange-function-not-triggering-for-dynamically-created-inputs) is more robust.... – Zonker.in.Geneva Jun 28 '18 at 13:02

score 1 · Answer 3 · edited Dec 27 '15 at 10:49

1

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

edited Dec 27 '15 at 10:49

Davide Pastore

8,678
10
39
53

answered Dec 27 '15 at 09:08

Robert

19,800
5
55
85

Infinite recursion. – Hershel Jun 11 '23 at 15:33

Binding two checkboxes together

3 Answers3

Linked