позволяют два входных флажок ведут себя так же с JQuery

Question

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

<input type="checkbox" checked='true' /> 
<input type="checkbox" checked='true' /> 

Попытка использовать JQuery, чтобы два входа ведут себя так же. Если установлен первый флажок, проверяется 2-й. Если 1-й не проверен, 2-й не проверяется. И наоборот.

код у меня есть:

$('input:checkbox').live('change', function() { 
    $('input:checkbox').siblings().prop('checked',$(this).is(":checked")); 
}); 

Вызов .live() вместо .on() здесь, потому что я могу использовать только JQuery 1.6.4

Это работает, но если я деформировать эти входные метки до двух форм, он больше не будет работать. Зачем? Как это исправить? не

<form> 
    <input type="checkbox" checked='true'/> 
    </form> 
    <form> 
    <input type="checkbox" checked='true'/> 
    </form> 

Answer 1

Отбросьте брат и сестра в вашем JQuery. Так должно быть:

$('input:checkbox').prop('checked',$(this).is(":checked")); 

Это исправит вашу проблему.

Answer 2

После обертывания input элементов с form элементом, вход больше не братья. Вы можете использовать .siblings() на родительской форме, а затем местоположение по внутри него:

$('input:checkbox').live('change', function() { 
 
    $(this) 
 
    .parent() 
 
    .siblings('form') 
 
    .find('input:checkbox') 
 
    .prop('checked', $(this).is(":checked")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 

 
<form> 
 
    <input type="checkbox" class="example" checked='true' id="1" /> 
 
</form> 
 
<form> 
 
    <input type="checkbox" class="example" checked='true' id="2" /> 
 
</form>

Answer 3

Когда вы Seperate Чекбокс элементы друг от друга в DOM и гнездятся их в различных элементах, они а не братья и сестры друг друга, и метод JQuery .siblings() не вернет их.

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

$('.example').live('change', function() { 
    $('.example').prop('checked',$(this).is(":checked")); 
}); 

Сделан небольшой образец JFiddle для вас - https://jsfiddle.net/sa4eu86d/3/