只有当另外两个复选框未选中时，才取消选中复选框

Jquery, Uncheck checkbox only if two other checkboxes are unchecked

本文关键字：复选框 取消 两个      更新时间：2023-09-26

在我的网站中，用户可以创建'联系人类别'，'项目类别'，并可以决定哪个联系人类别与哪个项目类别相关联。多个项目类别可以与一个联系人类别相关联，反之亦然。

https://jsfiddle.net/vuuxn5gf/

这是HTML代码。

<h1>
  New Contact
</h1>
<input type="checkbox" value="1" id="user_name">Contact category 1<br>
<input type="checkbox" value="2" id="user_name">Contact category 2<br>
<input type="checkbox" value="3" id="user_name">Contact category 3<br><br>
<input type="checkbox" value="a" id="user_name">Item category a<br>
<input type="checkbox" value="b" id="user_name">Item category b<br>
<input type="checkbox" value="c" id="user_name">Item category c

和JQuery

var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chka = $("input[type='checkbox'][value='a']");
var chkb = $("input[type='checkbox'][value='b']");
var chkc = $("input[type='checkbox'][value='c']");
chk1.on('change', function() {
  chka.prop('checked', this.checked);
  chkb.prop('checked', this.checked);
});
chk2.on('change', function() {
  chkb.prop('checked', this.checked);
});
chk3.on('change', function() {
  chka.prop('checked', this.checked);
  chkc.prop('checked', this.checked);
});

在本例中，联系人类别1与项目类别a &B，接触类别2与项目类别B相关联，接触类别3与项目类别a相关联;c .

SITUATION:用户添加新联系人。用户将新联系人放入联系人类别1 &2. 这样，项目类别a &b通过JQuery代码激活get。

问题:如果用户取消选中联系人类别1，则两个类别a &B被停用了。而项目类别b仍然应该被选中，因为联系人类别2仍然被选中。

旁注:在实践中，这将不仅仅是3个类别。但是在更大的范围内，所以我希望这个问题可以用类似的东西来解决。

chk1.on('checked', function() {
  chka++;
  chkb++;
if (chka > 0) chka.prop('change', this.checked);
});
chk1.on('unchecked', function() {
  chka--;
  chkb--;
if (chka > 0) chka.prop('change', this.checked);
});

当前代码的一个问题是，对联系人类别和项目类别之间关系的唯一引用是在处理更改事件的每个函数中。

使用此方法，联系人类别1无法检查联系人类别2与项目类别b之间是否存在链接。

您将需要创建一些变量来保存这些关系，然后在每个更改事件中检查可能影响项目类别是否应该更改的其他关系。

我修改了你的小提琴:https://jsfiddle.net/vuuxn5gf/3/

我做了一个矩阵来表示不同类别之间的关系。这只是一个例子，你可以用另一种方式来表示矩阵，但我是这样定义它的:

var icats = [];
icats['a'] = ['1','3'];
icats['b'] = ['1','2'];
icats['c'] = ['3'];

然后我创建了一个函数来处理联系人类别更改事件，对于每个事件，都要通过项目类别复选框，对于每个事件，在矩阵上执行检查，以处理是否检查了其他联系人类别

$("#contact-cats input:checkbox").on('change', function(){
  var idx = $(this).val();
  $("#item-cats input:checkbox").each(function(){
    var itm = $(this).val();
    var arr = icats[itm];
    var skipChange = false;
    var makeChange = false;
    for(var i=0;i<arr.length;i++){
      if(arr[i] != idx){
         skipChange = $("#contact-cats input:checkbox[value="+arr[i]+"]").prop("checked");
      }else{
         makeChange = true;
      }
    }
    if(makeChange && !skipChange){
      $(this).prop("checked", !$(this).prop("checked"));
    }
  });
});

我承认这不是最干净的，但我希望它能让你明白你自己的解决方案所需要的思想。

我更新了你的id是唯一的，并添加了一个'redoit'函数，在你取消勾选后重新应用选中的状态，例如取消勾选cb1，而cb2被选中。为了简洁，我也去掉了变量。我希望这对你有帮助!

HTML: 

<h1>
New Contact
</h1>
<input type="checkbox" value="1" id="cb1">Contact category 1
<br>
<input type="checkbox" value="2" id="cb2">Contact category 2
<br>
<input type="checkbox" value="3" id="cb3">Contact category 3
<br>
<br>
<input type="checkbox" value="a" id="cba">Item category a
<br>
<input type="checkbox" value="b" id="cbb">Item category b
<br>
<input type="checkbox" value="c" id="cbc">Item category c
jQuery: 

$("#cb1").on('change', function() {
  $("#cba").prop('checked', this.checked);
  $("#cbb").prop('checked', this.checked);
  redoit();
});
$("#cb2").on('change', function() {
  $("#cbb").prop('checked', this.checked);
  redoit();
});
$("#cb3").on('change', function() {
  $("#cba").prop('checked', this.checked);
  $("#cbc").prop('checked', this.checked);
  redoit();
});
function redoit() {
  if ($("#cb1").is(':checked')) {
    $("#cba").prop('checked', true);
    $("#cbb").prop('checked', true);
  }
  if ($("#cb2").is(':checked')) {
    $("#cbb").prop('checked', true);
  }
  if ($("#cb3").is(':checked')) {
      $("#cba").prop('checked', true);
    $("#cbc").prop('checked', true);
  }
};
相关文章：