Javascript jQuery复选框问题组

我有两组复选框

newBuilding

和

oldBuilding

这里的想法是我只能选择组中的一个复选框

在每个组中都有复选框名称其他区域，所以当我点击它时，它会显示和隐藏旁边的文本框

现在，为了实现第一点，让我们举例来说，我们已经选中了

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

我的朋友

---

您可以尝试以下代码来修复该问题（在fiddle中测试）：

---

尝试在代码中替换此项。它应该会起作用

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

正如您所看到的，我添加了

groups

var，它可以包含多个组（不仅仅是两个），但需要对代码进行更多的更改才能使其正常工作

您需要通过类似于

$（this）.closest（'.form group'）.id的方式检测当前组的id/类，并重置除当前组之外的每个组。这样你就只剩下一个通用的变化函数

哦，您还需要为包含文本输入的复选框添加一些类，如果单击该复选框，则触发输入切换。所以它不是
if（this.id=='chknewbuildingotherarears'）{
而是类似
if（$（this.hasClass（'has-input'））
看看你的代码格式，你不会大哭吧？对代码进行了格式化；）谢谢，现在阅读起来容易多了，但是你能为你的复选框组提供html示例吗（更擅长JSFIDLE）所以每个人都可以尝试并修补解决方案？-你不需要触发更改，因为你还没有停止原始事件，它仍然在触发。因此，单击两次，这就是为什么它未被选中。如果我正确理解你想要什么…我能想到的唯一解决方案是手动隐藏它们，而不是触发更改，但是t我想你已经试过了，如果你在jsfiddler第3行到第9行检查了你的代码，并用建议的解决方案更新了我上面的注释，你的代码的问题是
change
事件。当你在一种类型的复选框上调用
change
函数时，你也在使用
removeAttr（）
用于从其他类型的复选框中删除复选框。这将最终触发相应复选框上的
更改
事件，并使您单击的复选框再次未选中。否，如果我单击了其他区域，它将显示未隐藏的文本框
                    $("#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();
                        }
                    });

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