check a check box on parent elements click

Question

I have created a basic demo of my code here.

Desired functionality:

When I click on tr checkbox inside that tr should get checked and that tr should get highlighted. Same should happen when I click on the checkbox.

Problem:

Above functionality works perfectly fine when I click on checkboxes. But when I click on tr it works only for first click. If I click the tr again the checkbox is not getting checkked again.

What could be the issue? Please help.

Jquery and html can be found on jsfiddle link. But still for reference here it is:

HTML:

<table border="1" width="100%">
    <tbody>
        <tr>
            <th colspan="4">NEW PRODUCTS FOUND</th>
        </tr>
        <tr>
            <th>Shelf</th>
            <th>Product</th>
            <th>Corrected</th>
        </tr>
        <tr class="hover_row hover_row_product pr_row_1">
            <td>aa</td>
            <td>sdcsd</td>
            <td>
                <input type="checkbox" class="product_correction" product_id="1">
            </td>
        </tr>
        <tr class="hover_row hover_row_product pr_row_2">
            <td>aa</td>
            <td>sdcsdc</td>
            <td>
                <input type="checkbox" class="product_correction" product_id="2">
            </td>
        </tr>
        <tr class="hover_row hover_row_product pr_row_3">
            <td>aa</td>
            <td>dbfgbdfgb</td>
            <td>
                <input type="checkbox" class="product_correction" product_id="3">
            </td>
        </tr>
    </tbody>
</table>

JS:

 /*Correction proccess*/
 $('.hover_row_product').click(function (e) {
     var checkbox = $(this).find(':checkbox');
     if ($(e.target).closest('input[type="checkbox"]').length > 0) {
         //check box clicked
     } else {
         checkbox.attr('checked', !checkbox.attr('checked'));
     }
     $prod_id = checkbox.attr('product_id');
     $input_checked = 2;
     if (checkbox.is(':checked')) {
         $input_checked = 1;
         $('.pr_row_' + $prod_id).addClass('corrected_row');
     } else {
         $input_checked = 0;
         $('.pr_row_' + $prod_id).removeClass('corrected_row');
     }
 });

score 2 · Accepted Answer · edited May 23 '17 at 11:50

Working demo http://jsfiddle.net/78qzH/ or this loo at the alert http://jsfiddle.net/HfYZe/

Use .prop instead of .attr.

Further if you keen: .prop() vs .attr()

Hope this fit your need! :)

Code

/*Correction proccess*/
 $('.hover_row_product').click(function (e) {
     var checkbox = $(this).find(':checkbox');
     if ($(e.target).closest('input[type="checkbox"]').length > 0) {
         //check box clicked
     } else {
         checkbox.prop('checked', !checkbox.prop('checked'));
     }
     $prod_id = checkbox.attr('product_id');
     $input_checked = 2;
     if (checkbox.is(':checked')) {
         $input_checked = 1;
         $('.pr_row_' + $prod_id).addClass('corrected_row');
     } else {
         $input_checked = 0;
         $('.pr_row_' + $prod_id).removeClass('corrected_row');
     }
 });

score 0 · Answer 2 · answered Nov 10 '13 at 08:14

I see desired functionality when I switch the attr() calls on line 7 to prop():

checkbox.prop('checked', !checkbox.prop('checked'));

Perhaps someone else could provide a source, but I don't believe the browser will always register the "checked" attribute as an actual attribute unless it's manually manipulated (as opposed to the native functionality: clicking on the checkbox). It is, of course, always available as a property of the checkbox's object itself.

check a check box on parent elements click

2 Answers2