Question

我正在尝试检测复选框上何时发生了更改，但到目前为止已尝试使用onchange，onclick和[just]单击但未成功。我已经继承了＆＃39;复选框的HTML（通过Smarty模板构建），按照此处构建： -

＆＃13;

<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>

＆＃13;

在javascript中，我按照此处的方式声明了一个对象： -

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

然后我宣布点击＆＃39;针对该对象的功能，该对象本身旨在运行另一个对象＆＃39;检索＆＃39;功能。后来的'检索'＆＃39;函数根据复选框的值执行AJAX调用，并填充另一个控件。

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

我已经取代了“点击”。这里显示的是＆＃39;在变化＆＃39;和＆＃39; onclick＆＃39;但无济于事。我已经阅读了很多文章，其中一篇文章表明我可能需要添加一个事件监听器......但是我不完全确定我的语法需要什么语法？

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

谢谢

修改

因此，为了扩展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>

Answer 2

JQuery 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>

Answer 3

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

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

请查看下面的代码段

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript Checkbox（es）onclick / onchange

修改

3 个答案: