create a group of checkboxes with a click event associated Javascript

Question

I'm creating a javascript function that builds a table with checkboxes. I want associate a click event to them. The event must be the same for all.

This is a part of my code:

var i = 0;
for (i = 0; i < data.Items.length; i++) {
    var tr = $(document.createElement('tr'));
    tr.addClass("MyBookings_table_content");
    $("#MyBookings_table").append(tr);

    //Create a CheckBox Element
    var chkbox = document.createElement('input');
    chkbox.type = "checkbox";
    chkbox.id = "chk"+i.toString();
    chkbox.name = "chk" + i.toString();
    //Event here
}

Can anybody help me?

Samuel Caillerie · Accepted Answer · 2014-11-19 10:59:37Z

2

Since you are using jQuery, you can simply add this event listener :

$("#MyBookings_table").on("click", "input[type=checkbox]", clickCB);

function clickCB() {
    var $cbx = $(this);

    // some code on my checkbox
}

This code is to be appended after the loop, see this fiddle : http://jsfiddle.net/6f79pd5y/

edited Nov 19, 2014 at 10:59

answered Nov 19, 2014 at 10:38

Samuel Caillerie

8,2652 gold badges29 silver badges34 bronze badges

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

4 Comments

user3178157 Over a year ago

but If I do an alert window inside the click function to show the value of the combo box, a lot of windows open! And I just want one windows, because I only click on 1 checkbox.

Samuel Caillerie Over a year ago

Yes this code is to append after the loop (and not inside the loop)... I have added a fiddle if you want to see how to use it...

user3178157 Over a year ago

Another thing if you can help me again. It's possible in click function add all checked checkboxes to an array ? Thank you

Samuel Caillerie Over a year ago

Yes sure : use $("#MyBookings_table").find("input:checked"). But this is a jQuery object with all checked boxes. If you want an array with all DOM elements corresponding to the checked boxes, use instead : $("#MyBookings_table").find("input:checked").toArray()

Eyal Ofri · Accepted Answer · 2014-11-19 10:37:16Z

0

create a function and link it with an addEventListener

function outerFunction(){
}
checkbox.addEventListener('click', outerFunction);

answered Nov 19, 2014 at 10:37

Eyal Ofri

70810 silver badges16 bronze badges

Comments

Billy · Accepted Answer · 2014-11-19 10:38:32Z

0

addEventListener("click",myFunction);

where you have the comments

answered Nov 19, 2014 at 10:38

Billy

2,4381 gold badge13 silver badges13 bronze badges

2 Comments

user3178157 Over a year ago

It's working! thank you. Is possible pass to "myFunction" the combobox object? something like addEventListener("click",myFunction(this)); ?

Billy Over a year ago

yeah,you have to do it a bit different though.addEventListener("click",function(e){ myFunction(this); }) Try this and let me know.

Maffelu · Accepted Answer · 2014-11-19 10:39:20Z

0

How about:

var i = 0;
for (i = 0; i < data.Items.length; i++) {
    var tr = $(document.createElement('tr'));
    tr.addClass("MyBookings_table_content");
    $("#MyBookings_table").append(tr);

    //Create a CheckBox Element
    var chkbox = document.createElement('input');
    chkbox.type = "checkbox";
    chkbox.id = "chk"+i.toString();
    chkbox.name = "chk" + i.toString();

    //Event here
    $(chkbox).click(function()
                    {
                       alert("Click!"); 
                    });

    tr.append(chkbox);
}

A working example:http://jsfiddle.net/mpup12z5/

answered Nov 19, 2014 at 10:39

Maffelu

2,1285 gold badges29 silver badges38 bronze badges

Comments

David Thomas · Accepted Answer · 2014-11-19 10:43:47Z

If you reorganise your element-creation to use jQuery also, you can bind the click-handler at the point of creation:

var i = 0;
for (i = 0; i < data.Items.length; i++) {
    var tr = $(document.createElement('tr'));
    tr.addClass("MyBookings_table_content");
    $("#MyBookings_table").append(tr);

    $('<input />', {
        'type' : 'checkbox',
        'id' : chk + i, // i will be converted to a string automatically
        'name' : chk + i,
        'click' : functionToCall // note: no parentheses, you want to
    });                          // call the function, not use its return value
}

Or:

var i = 0;
for (i = 0; i < data.Items.length; i++) {
    var tr = $(document.createElement('tr'));
    tr.addClass("MyBookings_table_content");
    $("#MyBookings_table").append(tr);

    $('<input />', {
        'type' : 'checkbox',
        'id' : chk + i, // i will be converted to a string automatically
        'name' : chk + i,
        'on' : {
            'click' : functionToCall
        }                            
    });
}

But, it really is preferable to delegate the event-handling to the closest ancestor element, presumably the <table>, unless a specific property of the created <input /> should call a different function, or do something somewhat different.

Collectives™ on Stack Overflow

create a group of checkboxes with a click event associated Javascript

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related