Javascript Checkbox(es) onclick/onchange

Question

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 comment, 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?

Could you please provide a jsfiddle with what you have so far so we can test and check the problem for ourselves. — YaBCK
– 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 complicated when not using a library (like jQuery). — adeneo
– adeneo, Commented Oct 6, 2016 at 14:23
use this code parent_obj_field1[0].addEventListener('change', function (event) { } — Saurabh Srivastava
– 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
– 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
– Gray_em, Commented Oct 6, 2016 at 15:06

dynabaul · Accepted Answer · 2016-10-06 14:47:18Z

1

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

<script>

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

</script>

answered Oct 6, 2016 at 14:47

dynabaul

1811 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gray_em Over a year ago

Hi... As per Rahul Patel..... Unfortunately because I have 'inherited' the way the HTML is built it would be difficult to add the onclick to the input tags.

Rahul Patel · Accepted Answer · 2016-10-06 14:41:38Z

0

Use onchange attribute in HTML and use a common 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>

edited Oct 6, 2016 at 14:41

answered Oct 6, 2016 at 14:36

Rahul Patel

5,2342 gold badges16 silver badges26 bronze badges

1 Comment

Gray_em Over a year ago

Hi... Unfortunately because I have 'inherited' the way the HTML is built it would be difficult to add the onchange to the input tags.

Mr Lister · Accepted Answer · 2016-10-15 06:52:09Z

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

Collectives™ on Stack Overflow

Javascript Checkbox(es) onclick/onchange

EDIT

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related