Fire event on Jquery check/uncheck

Question

I want to set a variable (pageselected) as per the checkbox click/unclick event.

The HTML code is :

<thead>
    <tr id="othercheckbox">
        <th width="10"><input type="checkbox" name="zip" class="all"  value="all" /></th>              
    </tr>
</thead>
    

The code in JS file is :

$('#othercheckbox').click(function() {

    if($(this).is(':checked')){
        console.log("CCCCheckeddddddd");
        that.pageselected = true;
    }
    else
    {
        console.log("UNCheckeddddddd");
        that.pageselected = false;
    }
}
      

But this is not behaving as expected. Where am I going wrong?

Botanize

Table rows don't have a checked property. – Bevin

It is a variable used in the code declared as var that = e.data.that ; so we refer all the user-defined variables as that.<variable_name> – Botanize

Thanks. Then where should I add the id ? – Botanize

Answer 1

You are checking the row is checked or not, which is not possible.bind onchange event on the checkbox. put it on the checkbox let say checkbox1.

HTML Code:

<input type="checkbox" name="zip" id="checkbox1" class="all"  value="all" />

JS Script:

$('#checkbox1').change(function(){

    if($(this).is(':checked')){
        console.log("CCCCheckeddddddd");
    }
    else
    {
        console.log("UNCheckeddddddd");
    }    

});

Ricarda

I would remove that since it is undefined. – Sevier

Answer 2

JSFIDDLE DEMO

Since the checkbox is inside the tr with id othercheckbox .. Use this

$('#othercheckbox input[name="zip"]').click(function () {
    if ($(this).is(':checked')) {
        alert("CCCCheckeddddddd");
        //that.pageselected = true;
    } else {
        alert("UNCheckeddddddd");
        //that.pageselected = false;
    }
});

Flexile

Answer 3

Change the selector. Bind the event on the input rather on tr. If you only want to set true or false then following approach will be better.

JS:

$('#othercheckbox input').click(function () {        
    var pageselected = $(this).is(':checked'); // change pageselected or any variable of your choice accordingly.
});

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/329/

Ringsmuth