Javascript 复选框 onclick/onchange

Question

我试图检测复选框何时发生更改，但到目前为止已尝试使用 onchange、onclick 和 [just] click 但没有成功。我已经“继承”了复选框的 HTML(通过 Smarty 模板构建)，这些复选框是按照此处构建的:-

<input type="checkbox" name="field1[]" id="field1_1" value="80000" />
<label for="field1_1">80000</label>
<input type="checkbox" name="field1[]" id="field1_2" value="80001" />
<label for="field1_2">80001</label>
<input type="checkbox" name="field1[]" id="field1_3" value="80002" />
<label for="field1_3">80002</label>
<input type="checkbox" name="field1[]" id="field1_4" value="80003" checked />
<label for="field1_4">80003</label>
<input type="checkbox" name="field1[]" id="field1_5" value="80004" />
<label for="field1_5">80004</label>
<input type="checkbox" name="field1[]" id="field1_6" value="80005" />
<label for="field1_6">80005</label>

在 javascript 中，我按照此处声明了复选框的对象:-

<script>
parent_obj_field1 = document.getElementsByName('field1[]');
</script>

然后，我针对该对象声明一个“单击”函数，该函数本身旨在运行另一个“检索”函数。后面的“retrieve”函数根据复选框的值执行 AJAX 调用并填充另一个控件。

<script>
parent_obj_field1[0].click = function() { 
  child_obj_field3_retrieve_data(); 
}
</script>

我已将此处显示的“单击”替换为“更改时”和“单击时”，但无济于事。我读过很多文章，其中一篇建议我可能必须添加事件监听器...但我不完全确定我的情况所需的语法？

您能否建议我如何在用户单击/取消单击集合中的任何框时触发事件？

谢谢

编辑

因此，为了扩展 Saurabh Srivastava 评论，我添加了

parent_obj_field1[0].addEventListener('change', function (event) {alert('changed') });

但是当我单击任何框时没有收到警报？我可能误解了这是如何工作的？

Answer 1

将 onclick="toggleCheckbox(this)" 添加到每个复选框。然后使用这个 JavaScript。

<script>

function toggleCheckbox(item)
 {
   alert(item.id);
 }

</script>