Dynamic checkbox onchange & javascript

Question

This might be an easy one for you, but I'm stuck, so I hope you can help me.

I'm creating checkboxes through a loop and want to specify a text somewhere in the website if a checkbox is clicked.

I'v seen solutions where a make a script for each checkbox, but that could turn out to be alot sometimes (something like this: chckbx.onchange = function(){} )

I'd rather have one function that is called from different checkboxes, but my javascript skills is basicly non-existing :)

This is what i got so far (which ofcourse dosn't work) http://jsfiddle.net/Sz3BK/130/

Please post the code in your question. An additional fiddle is nice, but your question should work without external ressources. — Bergi
– Bergi, Commented Dec 13, 2013 at 11:10
your jsfiddle works if function not wrapped inside loader function, behaviour on jsfiddle, see with no wrap: jsfiddle.net/Sz3BK/134 — A. Wolff
– A. Wolff, Commented Dec 13, 2013 at 11:11
@Bergi I will remember that for the next time (will probably need help again hehe) — Rosenthaler
– Rosenthaler, Commented Dec 13, 2013 at 11:45
@A.Wolff Ok, now I just feel stupid ;) Thanks for the heads up — Rosenthaler
– Rosenthaler, Commented Dec 13, 2013 at 11:46
@user2532985 this is common issue for someone who is not accustomed to using jsfiddle, no problem! — A. Wolff
– A. Wolff, Commented Dec 13, 2013 at 11:49

James Donnelly · Accepted Answer · 2013-12-13 11:15:59Z

7

You have jQuery tagged in your question, so I'm going to provide a jQuery answer:

You'd use jQuery's on() method to delegate the event to a non-dynamic ancestor of your checkbox:

$('elem').on('change', 'input[type="checkbox"]', function() {
    ...
});

Where elem is a non-dynamic ancestor of your checkbox.

In your JSFiddle your checkbox isn't dynamic, but assuming it was, the closest non-dynamic ancestor of it would be the document's body. Therefore, we can use:

$('body').on('change', 'input[type="checkbox"]', function() {
    testing('hello', '1');
});

JSFiddle demo.

You may want to extend this by passing in "hello" and "1" as data-* attributes:

<input type="checkbox" name="test" data-newvalue="hello" data-spanid="1" />
<input type="checkbox" name="test" data-newvalue="second" data-spanid="2" />

Here I've created two checkboxes with our two data-* attributes. In our jQuery method we can pull these values and pass them into our testing() function using jQuery's data() method:

$('body').on('change', 'input[type="checkbox"]', function() {
    testing($(this).data('newvalue'), $(this).data('spanid'));
});

JSFiddle demo.

We can then modify our testing() function to also use jQuery:

function testing(newValue, spanID) {
    $('#'+spanID).text(newValue);
}

This pulls our spanID (e.g. "1") and places it within an ID selector $('#1'), then modifies the text using jQuery's text() method. If you wanted to modify the HTML instead, jQuery also has a html() method for this purpose.

Final JSFiddle demo.

edited Dec 13, 2013 at 11:15

answered Dec 13, 2013 at 11:10

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

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

1 Comment

Rosenthaler Over a year ago

This is absolutely amazing. Thank you so much for the help (and thanks to all the other contributers as well)!! You not only provided the answer but an explanation as to why and how it works. Just great!

reZa · Accepted Answer · 2013-12-13 11:16:33Z

2

because you are adding che checkboxes dynamicly, to enable the change event for those added later, use code below

    $(document).on('change', 'input[type="checkbox"]', function() {
    ...
    });

answered Dec 13, 2013 at 11:16

reZa

819 bronze badges

Comments

Vishal Patel · Accepted Answer · 2013-12-13 11:11:43Z

0

Change your jsfiddle code http://jsfiddle.net/Sz3BK/136/ like this...

Add <head></head> in HTML code at top..

and change on load to "No wrap - in head"

answered Dec 13, 2013 at 11:11

Vishal Patel

9735 silver badges12 bronze badges

Comments

MysticMagicϡ · Accepted Answer · 2013-12-13 11:15:09Z

0

This code works fine for me:

$('input[name=test]').change(function(){

    if($(this).is(':checked'))
    {
        alert("chk");
        // Checkbox is checked.
    }
    else
    {
        alert("unchk");
        // Checkbox is not checked.
    }    

});

Check the fiddle. Hope it helps.

answered Dec 13, 2013 at 11:15

MysticMagicϡ

28.8k16 gold badges77 silver badges126 bronze badges

Collectives™ on Stack Overflow

Dynamic checkbox onchange & javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related