Unable to successful detect click or change events on a checkbox

Question

Problem: Unable to successful detect click or change events on a checkbox.

Intent: The overall intent is to detect a change or click on a checkbox and then use jquery’s show and hide methods to display / hide elements.

My approaches so far include the following:

Method 1: Onclick Handler

HTML

<div class="col-md-1"><center>
    <label><p>Recurring</p>
    <input type="checkbox" onclick="toggleRecur()"></input></label></center>
</div>

JAVASCRIPT

function toggleRecur(){
console.log("something clicked"); }

Method 2: jquery EventListener HTML

<div class="col-md-1"><center>
     <label><p>Recurring</p>
     <input type="checkbox" id="task_recur" ></input></label></center>
  </div>

Javascript/jquery

$(document).on("checked","#task_recur",function(){         
        alert("something checked");
});

Method 3: jquery Listener 2

$('input[id=task_recur]').change(function(){

if($(this).is(':checked'))
    alert("czech it");

});

Unfortunately, none of the above worked, whether inside or out of the document load. I'm currently running under chrome. Any help would be so appreciated!

You should try the onchange event instead of onclick or with Jquery $('#task_recur').change(function() { alert('clicked'); }); — ex0ns
– ex0ns, Commented Aug 25, 2015 at 11:34
This on works for me, jsfiddle.net/p4sv06sj use document.ready — Adil
– Adil, Commented Aug 25, 2015 at 11:35
I generally used the third method. And it should work. Check in your html that have you used the id with which you are selecting the elelment. — Abhisek Malakar
– Abhisek Malakar, Commented Aug 25, 2015 at 11:37

Luthando Ntsekwa · Accepted Answer · 2015-08-25 11:38:47Z

1

First Option

function toggleRecur(){
alert("something clicked"); }

<div class="col-md-1"><center>
    <label><p>Recurring</p>
    <input type="checkbox" onclick="toggleRecur()"></input></label></center>
</div>

2nd option

document.getElementById('task_recur').onclick = function() {         
        alert("something checked");
   }

<div class="col-md-1"><center>
    <label><p>Recurring</p>
    <input type="checkbox" id="task_recur" /></label></center>
</div>

answered Aug 25, 2015 at 11:38

Luthando Ntsekwa

4,2486 gold badges25 silver badges53 bronze badges

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

2 Comments

Luthando Ntsekwa Over a year ago

some people just use the downvote button for no reason

John Over a year ago

@LuthandoLoot I've tried both approaches and neither seems to work for me. Let me be more specific. Option #1 works, but only on page refresh, not on click., which indicates that there must be something elsewhere in the html or javascript that is interfering with something. I'll continue to experiment. +1 for including the snippets above.

Deepak Ingole · Accepted Answer · 2015-08-25 11:35:21Z

0

I can see bug in only,

$(document).on("change", "#task_recur", function () { // event should be change not checked
    alert("delegated event");
});

Also,

if($(this).is(':checked')) can be replaced with simply if(this.checked) {}

`DEMO`

answered Aug 25, 2015 at 11:35

Deepak Ingole

15.9k10 gold badges49 silver badges80 bronze badges

4 Comments

Deepak Ingole Over a year ago

@kovogel some people do it intentionaly to check their downvoting power

John Over a year ago

@TributetoAPJKalamSir Thanks for the input. What's strange is that I literally copied and pasted the code, but didn't work. I did observe upon inspection through chrome extension, that some HTML is being generated around my element for some reason. That's the problem with using templates. Not sure if this is a red herring, but the fact that none of the proven solutions seem to be working for me makes me believe that something on the tangent is afoot. Thanks again.

Deepak Ingole Over a year ago

@dellaboemia can you provide compete code...will check if I can help you

Deepak Ingole Over a year ago

@dellaboemia solution should infact wok even when template is doing its job. As we are delegating an event and also our selector is id selector . strange...

Tobias Golbs · Accepted Answer · 2015-08-25 11:35:47Z

0

With pure javascript:

document.getElementById('task_recur').onclick = function() {
    if (this.checked) {
        alert("Checked);
    }
};

With jquery:

$(document).on("change", "#task_recur", function(){         
    alert("something checked");
});


$('#task_recur').change(function() {
    if($(this).is(':checked'))
        alert("czech it");
});

answered Aug 25, 2015 at 11:35

Tobias Golbs

4,6164 gold badges31 silver badges50 bronze badges

1 Comment

John Over a year ago

tried both approaches, but no luck. As I mention below, I think I may have some other issue that is interfering with things. I will continue to work the problem and advise should I discover something interesting.

Collectives™ on Stack Overflow

Unable to successful detect click or change events on a checkbox

3 Answers 3

2 Comments

`DEMO`

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related