Javascript OnChange for Checkbox

Question

I have 5 checkboxes and 1 textarea in my form and would like to just hook OnChange() for all of these. However, for whatever reason nothing I have found on Stack Overflow seems to be getting called.

As this is the most basic example I found, what is wrong with this?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<script type="text/javascript">
$(document).ready(function()
{
    $("input").on("input", function()
    {
        alert("CHANGED");
    });
}
</script>

First of all, it does not work on a textarea, input != textarea. Try $("input, textarea").on("change", function() { alert("changed"); }) — putvande
– putvande, Commented Jan 3, 2014 at 11:26

Zaheer Ahmed · Accepted Answer · 2014-01-03 11:28:19Z

3

you should handle change event:

$('input:checkbox,textarea').change(function () {
   alert('changed');
});

edited Jan 3, 2014 at 11:28

answered Jan 3, 2014 at 11:27

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

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

2 Comments

putvande Over a year ago

What about the textarea?

Zaheer Ahmed Over a year ago

@putvande add elements selectors you want to trigger functions

CodingIntrigue · Accepted Answer · 2014-01-03 11:34:56Z

1

The oninput event is only triggered when the text of an input changes, so it won't be fired for checkboxes. Try binding to the change event for checkboxes and the input event on textareas:

$("textarea").on("input", yourFunction);
$("input:checkbox").on("change", yourFunction);

function yourFunction() {
    alert("CHANGED");
}

jsFiddle which demonstrates the above.

Note: The difference in this answer is the alert is triggered immediately in the textarea, not only on blur of the element.

Additional Note: The oninput event isn't supported in < IE9

edited Jan 3, 2014 at 11:34

answered Jan 3, 2014 at 11:29

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

3 Comments

user470760 Over a year ago

Should this be placed in document ready? Something is strange as nothing is happening at all.

CodingIntrigue Over a year ago

@BrettPowell Yup, needs to be in the document ready for it to work (as shown in the fiddle)

user470760 Over a year ago

That worked, thank you. Seems I forgot a ) and it was causing my Document.Ready function not to work lol. How can I get the element name/value for the checkbox inside this function?

Ishan Jain · Accepted Answer · 2014-01-03 11:35:06Z

1

Why you bind input event for checkbox, it's only fire for textarea?

You need to bind change event :

Try this one:

Updated

$(document).ready(function()
{
    $("textarea").on("input", function(){
      alert("CHANGED");
    });

    $("input").on("change", function(){
        alert("CHANGED");
    });
});

Try in fiddle

edited Jan 3, 2014 at 11:35

answered Jan 3, 2014 at 11:30

Ishan Jain

8,22111 gold badges52 silver badges77 bronze badges

1 Comment

Ishan Jain Over a year ago

No, both are in a single "document ready"( Due to bad alingment they look like). :)

Güven Altuntaş · Accepted Answer · 2014-01-03 11:31:54Z

0

Checkboxes usually used with same name property so in selector name property will be usefull

$("input[name='interests']").change(function(){
   /*some code*/
});

answered Jan 3, 2014 at 11:31

Güven Altuntaş

2531 silver badge9 bronze badges

Comments

Nitin Jain · Accepted Answer · 2014-01-03 11:28:29Z

-1

It will not work on textarea . you can assign all radio button and textarea a same class and then

$(".your_class_name").on("change", function()
{
    alert("CHANGED");
});

answered Jan 3, 2014 at 11:28

Nitin Jain

3,0832 gold badges27 silver badges37 bronze badges

Collectives™ on Stack Overflow

Javascript OnChange for Checkbox

5 Answers 5

2 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related