Связывание двух флажков вместе

Question

У меня есть два флажка

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

а также

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

Можно ли соединить эти два флажка, чтобы все, что происходит с атрибутом "флажок" одного флажка, происходило и с другим? Это должно работать для

1. Пользователь меняет проверенный статус

2. Некоторая функция javascript меняет проверенный статус

Мой фактический пример очень сложный и имеет много много флажков. Поэтому я ищу решение, в котором я могу просто определить связь между двумя флажками и больше никогда не думать об этом. спасибо карл

Answer 1

Конечно, это возможно, но зачем вам два флажка, если они ведут себя одинаково? Может быть, один флажок будет более удобным.:)

Ну, во всяком случае, с куском jQuery это должно работать нормально. Этот фрагмент позволяет назначить флажок группе, поэтому он автоматически выбирает других в той же группе.

Конечно, вы могли бы легко изменить это, например, в список идентификаторов, так что поведение не должно быть двухсторонним, но я не смог полностью определить из вашего вопроса, что вам нужно. В любом случае, добавление дополнительных флажков просто требует от них правильного атрибута.

Потому что он использует on функционировать таким образом, он должен даже работать для флажков, которые добавляются динамически.

$(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

Вы можете привязать обработчик события изменения к флажкам и, основываясь на значении измененного флажка, установить значение других флажков.

$(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

Это может быть связано, чтобы изменить или щелкнуть событие

$("#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"/>