选中复选框如果jquery选中了其他具有相同值的复选框

check checkbox if other checkbox with same value is checked jquery

本文关键字：复选框 其他 如果 jquery      更新时间：2023-09-26

如果选中其他具有相同值的复选框，如何选中复选框。如果选择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>

尽可能简单：

$('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的解决方案。

如果当前复选框已选中，则可以使用属性选择器获取具有相同值的其他复选框并设置其已选中属性

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>

您可以使用相同值的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>

相关文章：