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

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

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

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

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

<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 ment, I have added

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?

• javascript
• checkbox
• onclick
• click
• onchange

Share Improve this question Follow edited Aug 24, 2017 at 10:48 GarethAS 33133 silver badges1212 bronze badges asked Oct 6, 2016 at 14:18 Gray_emGray_em 2111 gold badge11 silver badge66 bronze badges 5

• 1 Could you please provide a jsfiddle with what you have so far so we can test and check the problem for ourselves. – YaBCK Commented Oct 6, 2016 at 14:21
• You're attaching an event handler on the first field1[] only, if you want to attach it to the rest of the elements, you have to iterate. If you want to attach it to dynamically generated elements gotten with ajax, you have to attach the event handler after the elements are loaded and inserted, or use a delegated event handler, which can be a bit plicated when not using a library (like jQuery). – adeneo Commented Oct 6, 2016 at 14:23
• use this code parent_obj_field1[0].addEventListener('change', function (event) { } – Saurabh Srivastava Commented Oct 6, 2016 at 14:24
• HI... Does adding this event listener mean that I do not need to alter the HTML tags? – Gray_em Commented Oct 6, 2016 at 14:55
• So I have added 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? – Gray_em Commented Oct 6, 2016 at 15:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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

<script>

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

</script>

Use onchange attribute in HTML and use a mon function in it and pass this object as argument in it.

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>

JQuery Change should do the trick.

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.

https://api.jquery./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>