Javascript Checkbox(es) onclick/onchange

Javascript Checkbox(es) onclick/onchange

提问by Gray_em

I am trying to detect when a change has occurred on a checkbox(es) but so far have tried with onchange, onclick and [just] click without success. I have 'inherited' the HTML for the checkbox(es) (built via Smarty templates) which are built as per here:-

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

In javascript I declare an object for the checkbox(es) as per here:-

在javascript中，我按照此处为复选框声明了一个对象：-

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

I then declare a 'click' function against that object which itself is intended to run another 'retrieve' function. The later 'retrieve' function carries out an AJAX call based on the value(s) of the checkbox(es) and populates another control.

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

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

I have substituted the 'click' shown here with 'on change' and 'onclick' but to no avail. I have read a number of articles including one that suggests that I might have to add an event listener... but I am not entirely sure of the syntax needed in my case?

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

Would you advise as to how I fire an event when the user clicks/unclicks any of the boxes in the collection?

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

Thanks

谢谢

EDIT

编辑

So to expand upon Saurabh Srivastava comment, I have added

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

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

but do not get an alert when I click any of the boxes? I may be misunderstanding how this works?

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

回答by dynabaul

Add onclick="toggleCheckbox(this)"to each of your checkboxes. Then use this javascript.

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

<script>

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

</script>

回答by Fennek

JQuery Change should do the trick.

JQuery Change 应该可以解决问题。

The change event is sent to an element when its value changes. This event is limited to <input>elements, <textarea>boxes and <select>elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

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

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

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>

回答by Rahul Patel

Use onchange attribute in HTML and use a common function in it and pass thisobject as argument in it.

在 HTML 中使用 onchange 属性并在其中使用公共函数并将this对象作为参数传递给它。

You can easily able to check checkbox is checked or not in the function and make operation accordingly.

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

Please check below snippet

请检查以下代码段

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>