选中复选框是否检查其他具有相同值的复选框

Question

如果选中了其他具有相同值的复选框，则如何选中该复选框。 如果选择1，则应选中另一个具有相同值的div复选框。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div> <input type="checkbox" value="1">1 <input type="checkbox" value="2">2 </div> <div> <input type="checkbox" value="1">1 <input type="checkbox" value="2">2 </div> 

Answer 1

变得如此简单：

 $('input:checkbox').on('change', function(){ //if(this.checked) // optional, depends on what you want $('input[value="' + this.value + '"]:checkbox').prop('checked', this.checked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div> <input type="checkbox" value="1">1 <input type="checkbox" value="2">2 </div> <div> <input type="checkbox" value="1">1 <input type="checkbox" value="2">2 </div> 

如果您希望其他项目在取消选中时保持选中状态，请查看Arun P Johny的解决方案 。

Answer 2

您可以使用属性选择器来获取具有相同值的其他复选框，并在选中当前复选框的情况下设置其选中属性

 jQuery(function($) { var $checks = $('input:checkbox').change(function() { if (this.checked) { $checks.filter('[value="' + this.value + '"]').not(this).prop('checked', this.checked); } }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div> <input type="checkbox" value="1">1 <input type="checkbox" value="2">2 </div> <div> <input type="checkbox" value="1">1 <input type="checkbox" value="2">2 </div> 

Answer 3

您可以使用具有相同值的filter()复选框并设置其属性。

 $(function() { var checkboxes = $(":checkbox").change(function() { var value = $(this).val(); checkboxes.filter(function() { return value == $(this).val() }).not(this).prop('checked', this.checked); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div> <input type="checkbox" value="1">1 <input type="checkbox" value="2">2 </div> <div> <input type="checkbox" value="1">1 <input type="checkbox" value="2">2 </div>