Javascript Jquery，仅当另外两个复选框未选中时才取消选中复选框

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

下面是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

在此示例中，联系人类别1与项目类别a和b关联，联系人类别2与项目类别b关联，联系人类别3与项目类别a和c关联

情况：用户添加新联系人。用户将新联系人置于联系人类别1和2。这样，通过JQuery代码激活项目类别a和b 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之间是否存在链接

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

我在这里修改了你的小提琴：

其中我制作了一个矩阵来保存不同类别之间的关系。这只是一个例子，你可以让矩阵换成另一种方式，但我是这样定义的：

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"));
    }
  });
});

$（“#联系猫输入：复选框”）。在（'change'，function（）上{
var idx=$（this.val（）；
$（“#项输入：复选框”）。每个（函数（）{
var itm=$（this.val（）；
var arr=icats[itm]；
var skipChange=false；
var makeChange=false；
对于（var i=0；i我更新了您的ID，使其唯一，并添加了一个“redoit”函数，以便在取消选中后重新应用选中状态，例如，在选中cb2时取消选中cb1。为了简洁起见，我还取消了变量。我希望这能有所帮助

HTML:

如果您希望扩展，明确定义每个复选框不是一个好的解决方案。您最好在某种动态生成的集合中定义一组依赖元素，然后在存在状态更改时测试依赖项。在哪里定义哪个类别与哪个类别类型相关联？我想您必须使用包含所有数据的数组，并在每次更改时选中/取消选中所有复选框。ID必须是唯一的1。ID必须是唯一的。每个元素应具有不同的ID 2。所有复选框应分组在一起，这意味着所有复选框应具有一个通用名称
$("#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"));
    }
  });
});

<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

$("#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);
  }
};