Javascript Checkbox(es) onclick/onchange

Javascript Checkbox(es) onclick/onchange

本文关键字：onclick onchange es Checkbox Javascript      更新时间：2023-09-26

我试图检测何时发生更改复选框(es)，但到目前为止已经尝试了onchange, onclick和[只是]单击没有成功。我已经"继承"了复选框的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>

然后针对该对象声明一个'click'函数，该对象本身打算运行另一个'retrieve'函数。后面的'retrieve'函数基于复选框的值执行AJAX调用，并填充另一个控件。

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

我已经用'on change'和'onclick'代替了这里的'click'，但无济于事。我读过许多文章，其中一篇文章建议我可能必须添加一个事件侦听器……但我不完全确定在我的情况下需要的语法?

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

感谢

编辑

所以为了扩展索拉布·斯里瓦斯塔瓦的评论，我添加了

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

但是当我单击任何框时没有得到警告?我可能误解了这是怎么回事?

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

<script>
function toggleCheckbox(item)
 {
   alert(item.id);
 }
</script>

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

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

请检查下面的代码片段

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>

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>
相关文章：