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>

然后，我對該對象聲明一個“單擊”功能，該對象本身旨在運行另一個“檢索”功能。 稍后的“檢索”功能根據復選框的值執行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>

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對象作為參數傳遞給它。

您可以輕松地在功能中選中復選框是否已選中並進行相應的操作。

請檢查以下片段

 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>