Jquery，只有当另外两个复选框未选中时才取消复选框。
在我的网站中，用户可以创建“联系人类别”、“项目类别”，并可以决定哪些联系人类别与哪些项目类别相关联。多个项目类别可以与联系人类别相关联，反之亦然。
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仍被选中。
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);
});回答 2
Stack Overflow用户
发布于 2016-10-20 17:45:54
当前代码的一个问题是，对联系人类别和项目类别之间关系的唯一引用是在处理更改事件的每个函数中。
使用此方法，联系人类别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"));
}
});
});我承认这不是最干净的，但我希望它能让你明白你需要自己解决的问题。
Stack Overflow用户
发布于 2016-10-20 18:33:22
我更新了您的is，使其是唯一的，并添加了一个“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 cjQuery：
$("#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);
}
};https://stackoverflow.com/questions/40159027
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号