将复选框绑定到布尔变量

Question

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

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

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

那么可以直接将复选框绑定到布尔变量吗？或者是否有将元素值绑定到变量的一般方法？

Answer 1

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

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

假设您遵循相同的约定来命名应用程序中的所有相关复选框，则应相应地调整子字符串函数。然后，要同时应用于多个复选框，您可以执行以下操作：

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

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