javascript - jQuery 组复选框问题

Question

我有两组复选框newBuilding 和oldBuilding。

1. 这里的想法是我只能选择该组中的一个复选框。
2. 在每个组中都有复选框名称其他区域，因此当我单击它时，它将显示和隐藏旁边的文本框。

现在为了实现第一点，举例来说，我们已经选中了 oldBuilding 复选框，如果我单击其中一个 newBuilding 复选框，那么它将删除该复选框来自 oldBuilding 组，但 ​​newBuilding 复选框不会被选中，而只会获得焦点，我必须再次单击才能检查。

我发现当我调用触发事件时会发生上述问题。我怎样才能克服这个问题

其他区域代码

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

我的jsfiddle

https://jsfiddle.net/milindsaraswala/wchrwjnx/

Answer 1

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/class 并重置除当前组之外的每个组。这样你就可以只留下一个通用的更改函数

哦，您还需要为包含文本输入的复选框添加一些类，如果单击该复选框，则会触发输入切换。所以它不会是 if (this.id == 'chkNewBuildingOtherAreas') { 而是类似 if ($(this).hasClass('has-input'))