Question

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

这是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＆amp; b，联系人类别2与项目类别b相关联，联系人类别3与项目类别a＆amp;角

状况：用户添加新联系人。用户将新联系人置于联系类别1＆amp;那样，项目类别a＆amp; b通过JQuery代码激活。

问题：如果用户取消选中联系人类别1，则项目类别a＆amp; b取消激活。虽然仍应检查项目类别b，但仍会检查联系人类别2。

SIDENOTE：实际上，这不仅仅是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之间是否存在链接。

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

我在这里修改了你的小提琴：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"));
    }
  });
});

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

Answer 2

I updated your ids to be unique and added a 'redoit' function to reapply the checked status after you uncheck, for example uncheck cb1 while cb2 is checked. I also got rid of the vars for brevity. I hope this helps!

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

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

2 个答案: