javascript - 将复选框绑定(bind)到 boolean 变量

Question

我的页面上有很多复选框，每个复选框都对应于我的 JavaScript 代码中的某个变量。目前，我对每个复选框都有这种代码:

$("#checkbox_var1").click(function() {
    Settings.var1 = $(this).checked();
});

我想知道是否可以在元素中存储对变量的引用(也许使用 data())，这样就足以将复选框绑定(bind)到 boolean 变量。我当前的代码变得相当长，因为我有相当多的复选框。

那么是否可以直接将一个复选框绑定(bind)到一个 boolean 变量上呢？或者是否有将元素的值绑定(bind)到变量的通用方法？

Answer 1

您可以对多个复选框使用相同的事件处理程序，使用元素的 id 在设置对象上连接两者，如下所示:

function checkListener (evt) {
    var id = this.id.substr(9);
    Settings[id] = $("#" + this.id + ":checked").length > 0;
}

假设您遵循相同的约定来命名应用程序中所有相关的复选框，您应该相应地调整 substring 函数。然后，要同时应用于多个复选框，您可以按照以下方式进行操作:

$(":checkbox[id*='checkbox']").click(checkListener);

转换为:“对于类型为复选框的所有输入元素，其 ID 包含‘复选框’”。这样，您可以用几行代码处理多个复选框。