Javascript 复选框 onclick/onchange答案

【问题标题】：Javascript Checkbox(es) onclick/onchangeJavascript 复选框 onclick/onchange
【发布时间】：2016-10-06 14:18:45
【问题描述】：

我正在尝试检测复选框何时发生更改，但到目前为止已尝试使用 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>

然后，我针对该对象声明一个“单击”函数，该对象本身旨在运行另一个“检索”函数。后面的“检索”函数根据复选框的值执行 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') });

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

【问题讨论】：

能否请您提供一个 jsfiddle 到目前为止您所拥有的内容，以便我们自己测试和检查问题。
您仅在第一个 field1[] 上附加了一个事件处理程序，如果您想将它附加到其余元素，则必须进行迭代。如果要将其附加到使用 ajax 获取的动态生成的元素，则必须在加载和插入元素后附加事件处理程序，或者使用委托事件处理程序，这在不使用库时可能会有点复杂（如 jQuery )。
使用此代码parent_obj_field1[0].addEventListener('change', function (event) { }
HI... 添加此事件侦听器是否意味着我不需要更改 HTML 标签？
所以我添加了 parent_obj_field1[0].addEventListener('change', function (event) {alert('changed') });但是当我单击任何框时没有收到警报？我可能误解了它是如何工作的？

标签： javascript checkbox onclick click onchange

【解决方案1】：

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

<script>

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

</script>

【讨论】：

嗨......根据 Rahul Patel ......不幸的是，因为我已经“继承”了 HTML 的构建方式，所以很难将 onclick 添加到输入标签。

【解决方案2】：

在 HTML 中使用 onchange 属性并在其中使用一个通用函数，并在其中传递 this 对象作为参数。

您可以在功能中轻松检查复选框是否选中并进行相应操作。

请检查下面的sn-p

function change_checkbox(el){
  if(el.checked){
    alert(el.value+" : checked");
  }else{
    alert(el.value+" : un-checked");
  }
}

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

【讨论】：

嗨...不幸的是，因为我已经“继承”了 HTML 的构建方式，所以很难将 onchange 添加到输入标签。

【解决方案3】：

JQuery Change 应该可以解决问题。

change 事件在元素值改变时发送到元素。此事件仅限于<input> 元素、<textarea> 框和<select> 元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会延迟到元素失去焦点为止。

https://api.jquery.com/change/

$( ".change-selector" ).change(function() {
  //execute your code
});

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

【讨论】：