javascript - Jquery，仅当其他两个复选框未选中时才取消选中复选框

Question

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

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 关联。

情况:用户添加了新联系人。用户将新联系人放置到联系人类别 1 和 2。这样，项目类别 a 和 b 就可以通过 JQuery 代码激活。

问题:如果用户取消选中联系人类别 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);
});

Answer 1

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

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

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

我在这里修改了你的 fiddle :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"));
    }
  });
});

我承认这不是最干净的，但我希望它能传达您自己的解决方案所需的想法。