如果选中复选框，则触发事件 javascript答案

【问题标题】：trigger event if checkbox is checked javascript如果选中复选框，则触发事件 javascript
【发布时间】：2018-10-13 12:52:10
【问题描述】：

我有一个带有多个复选框和一个禁用按钮的 HTML 页面。

现在，只要选中一个或多个复选框，按钮就必须启用。

此外，当所有复选框都未选中时，按钮必须再次进入禁用状态。

测试用例似乎是：

如果选中了一个复选框，则该按钮应启用（我可以开始工作）。

如果选中另一个复选框，则按钮保持启用状态（这也有效）。

如果第一个复选框未选中，则按钮也必须保持启用状态，因为第二个复选框仍处于选中状态。

最后一部分是我无法上班。

复选框是动态的，所以我不能事先定义它们。可能有两个或十个。

这就是我尝试 for 循环的原因。

到目前为止，我无法让它工作：

var x = document.getElementsByName("cb");

for (var i = 0; i < x.length; i++) {
    if(x[i].checked == true){
	    document.getElementById('Button1').disabled = false;
    }
}

<div class="container">
   <input type="button disabled" name="Button1" class="inputButton" id="Button1" value=" Send " disabled="disabled" />
</div>
<div>
   <input type="checkbox"  onchange="document.getElementById('Button1').disabled = !this.checked;" />
   <input type="checkbox"  onchange="document.getElementById('Button1').disabled = !this.checked;" />
</div>

HTML 和 onchange 事件以及 Javascript 都无法正常工作。

两者不能同时使用。

编辑：让它工作：Takit Isy 的答案很好！

【问题讨论】：

您应该创建一个函数doCheck() 来响应检查复选框的状态并更新按钮的状态。在每个复选框元素处，您都可以收听onchange 甚至调用doCheck。

标签： javascript html button checkbox

【解决方案1】：

我建议你这样做：
（参见我的代码中的 cmets）

var cbs = document.querySelectorAll('input[type="checkbox"]');
var but = document.getElementById('Button1');

function update() {
  but.disabled = true; // Disabled by default
  cbs.forEach(function(entry) {
    if (entry.checked) {
      but.disabled = false; // Enable button
      return false; // Exit the loop
    }
  });
}

cbs.forEach(function(entry) {
  entry.onchange = update; // Bind update() function on change of each checkboxes
});

<div class="container">
  <input type="submit" name="Button1" class="inputButton" id="Button1" value=" Send " disabled />
</div>
<div>
  <input type="checkbox" />
  <input type="checkbox" />
</div>

希望对你有帮助。

【讨论】：

【解决方案2】：

function onChange(e) {
    var checkedInputs = document.querySelectorAll('input[type="checkbox"]:checked');
    if (checkedInputs.length > 0) {
        document.getElementById('Button1').disabled = false;
    } else {
        document.getElementById('Button1').disabled = true;
    }
}

document.querySelectorAll('input[type="checkbox"]').forEach(function(val, key) {
    val.addEventListener("change", onChange);
})

<div class="container">
   <input type="button disabled" name="Button1" class="inputButton" id="Button1" value=" Send " disabled="disabled" />
</div>
<div>
   <input type="checkbox" />
   <input type="checkbox" />
</div>

【讨论】：