jquery: sync checkbox and radio buttons in a table on click

Question

I am using the following code in tables that can have checkboxes or radio buttons.

If the table contains checkboxes, I want to sync the click on the row with the checkbox and vice versa.

If the table contains radio buttons, I want to sync the click on the row with the radio button and also sync it with the other radio buttons since only one can be checked.

This code seems to work but I have merged several examples found on the forum so I wanted to know whether it's ok or if that can be improved?

Also:

What !== means in Javascript?

Why $(this).closest(".active").removeClass("active"); does not work properly?

    // Radio button in a table row
    // Change the class of the row if selected
    $(".radio-table-row").change(function() {
        $(".table tr.active").removeClass("active"); //remove previous active class
        //$(this).closest(".active").removeClass("active"); // Why this does not work?
        $(this).closest("tr").addClass("active"); //add active to radio selected tr
    });

    // Checkbox in a table row
    // Just add/remove classe based on the checked property
    $(".checkbox-table-row").change(function() {
       if( $(this).prop("checked") ) {
        $(this).closest("tr").addClass("active");
       }
       else {
        $(this).closest("tr").removeClass("active");
       }
    });

    $('.product .table tr').click(function(event) {
        if (event.target.type !== 'checkbox') {
          $(':checkbox', this).trigger('click');
        }
        if (event.target.type !== 'radio') {
          $(':radio', this).trigger('click');
        }
    });

Thanks

Kai · Answer 1 · 2014-03-19T06:35:52.357

!== / === is used to compare both value and typeof variable, != / == just compare the value. === is faster than ==. Example :

var a = 1;
var b = "1";
if(a == b) { 
   console.log('typeof a : %s, typeof b : %s >> a == b', typeof(a), typeof(b));
}
if (a === b) { 
   console.log('typeof a : %s, typeof b : %s >> a === b', typeof(a), typeof(b));
}
if(a === parseInt(b)){
   console.log('typeof a : %s, typeof b : %s >> a === parseInt(b)', typeof(a), typeof(b));
}

check the console log for the result.

score 0 · Answer 2 · edited May 23 '17 at 11:49

Your first question answer is does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons here the difference is only you are using not equal to instead of equal to.

$(this).closest(".active").removeClass("active"); will work only in case of the closest parent element has active class

And if you want to make a tr active on clicking tr or checkbox/radio then try this,

$('.product .table tr').click(function(event) {
    if (event.target.type !== 'checkbox' && event.target.type !== 'radio') {
        $('.product .table tr').removeClass('active');
        $(this).addClass('active');
        $(this).find(':checkbox, :radio').prop('checked',true);
    }    
});
$(':checkbox,:radio').change(function(event) {
    $('.product .table tr').removeClass('active');
    if(this.checked){
        $(this).closest('tr').addClass('active');
    }
});

Demo

jquery: sync checkbox and radio buttons in a table on click

2 Answers2