jQuery组复选框问题
jQuery组复选框问题
提问于 2016-04-10 08:35:19
我有两组复选框newBuilding & oldBuilding。
- 这里的想法是，我可以选择复选框，只有一个组。
- 在每个组中都有其他区域的复选框名称，所以当我单击它时，它将显示并隐藏它旁边的文本框。
现在，为了实现第一点，让我们举个例子，我们已经选中了oldBuilding复选框，如果我单击newBuilding复选框之一，那么它将从oldBuilding组中删除该复选框，但是oldBuilding复选框将不会被选中，而只是获得焦点，而，我不得不再次单击以检查。
当我调用触发器事件时，我发现上面的问题发生了。我怎样才能克服这个问题
其他区域代码
$("#chkOldBuildingOtherAreas").change(function () {
if ($("#chkOldBuildingOtherAreas").is(":checked"))
$("#txOldOtherAreas").show();
else
$("#txOldOtherAreas").hide();
});
$("#chkNewBuildingOtherAreas").change(function () {
if ($("#chkNewBuildingOtherAreas").is(":checked"))
$("#txNewOtherAreas").show();
else
$("#txNewOtherAreas").hide();
});从其他组中移除复选标记的代码
$("input[name='oldBuilding']").change(function () {
if ($("input[name='newBuilding']:checked").length > 0) {
$("input[name='newBuilding']").removeAttr('checked');
$("#chkNewBuildingOtherAreas").trigger("change");
}
});
$("input[name='newBuilding']").change(function () {
if ($("input[name='oldBuilding']:checked").length > 0) {
$("input[name='oldBuilding']").removeAttr('checked');
$("#chkOldBuildingOtherAreas").trigger("change");
}
});我的小提琴
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-04-10 09:53:51
https://jsfiddle.net/1ny36nwL/4/
var groups = ['.oldGroup', '.newGroup'];
$(groups.join(',')).find('input[type=text]').hide();
function resetGroup(selector) {
//clear and hide texts
$('input[type=text]', selector).val('').hide();
//uncheck boxes
$('input[type=checkbox]', selector).removeAttr('checked');
}
$("input[name='oldBuilding']").change(function(e) {
if (this.id == 'chkOldBuildingOtherAreas') {
$("#txOldOtherAreas").toggle();
}
resetGroup('.newGroup');
});
$("input[name='newBuilding']").change(function(e) {
if (this.id == 'chkNewBuildingOtherAreas') {
$("#txNewOtherAreas").toggle();
}
resetGroup('.oldGroup');
});正如您所看到的，我添加了groups var，它可以包含多个组(不仅仅是两个组)，但是代码需要修改一些才能工作。
您需要通过类似于$(this).closest('.form-group').id的方法检测当前组的id/类，并重置除当前组之外的每个组。这样，您只能保留一个通用的更改函数。
哦，您还需要为包含文本输入的复选框添加一些类，如果单击该复选框，则触发输入切换。所以不是if (this.id == 'chkNewBuildingOtherAreas') {，而是像if ($(this).hasClass('has-input'))这样的东西
Stack Overflow用户
发布于 2016-04-10 09:26:22
您可以尝试使用下面的代码来解决问题(在小提琴中进行测试)：
$('#txNewOtherAreas, #txOldOtherAreas').hide();
$('input[name="oldBuilding"]').on('click', function(){
if($('input[name="newBuilding"]').is(':checked')){
$('input[name="newBuilding"]').removeAttr('checked');
$('#txNewOtherAreas').hide();
}
});
$('input[name="newBuilding"]').on('click', function(){
if($('input[name="oldBuilding"]').is(':checked')){
$('input[name="oldBuilding"]').removeAttr('checked');
$('#txOldOtherAreas').hide();
}
});
$('#chkNewBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txNewOtherAreas').show();
} else {
$('#txNewOtherAreas').hide();
}
});
$('#chkOldBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txOldOtherAreas').show();
} else {
$('#txOldOtherAreas').hide();
}
});Stack Overflow用户
发布于 2016-04-10 09:29:12
尝试在您的代码中替换这个。应该管用的。
$("#txOldOtherAreas").hide();
$("#txNewOtherAreas").hide();
$("input[name='oldBuilding']").change(function (e) {
$("input[name='newBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkOldBuildingOtherAreas") {
$("#txOldOtherAreas").show();
$("#txNewOtherAreas").hide();
} else {
$("#txNewOtherAreas").hide();
}
});
$("input[name='newBuilding']").change(function (e) {
$("input[name='oldBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkNewBuildingOtherAreas") {
$("#txNewOtherAreas").show();
$("#txOldOtherAreas").hide();
} else {
$("#txOldOtherAreas").hide();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36527604
复制相关文章
相似问题
腾讯云开发者
