CODEWITHSUNDEEP
jquery
Maurice Jansen
Maurice Jansen

Reputation: 81

Remove class on TD when checkbox is unchecked

I am pretty new to Jquery and I am trying to figure out a problem with a script. The script checks and unchecks checkboxes in a table. It also removes the class on the TD: product_select.

My problem; Standard it selects the first checkbox in the table. The checkbox is checked and the td has the class 'product_select'. All good, but when I click on this checked checkbox to uncheck it then the class 'product_select' on the TD is not removed. It does uncheck the checkbox succesfully, but it keeps showing the class 'product_select'. This happens specially when the table has one record/td/checkbox.

Does anyone have an idea to remove the class 'product_select' from the TD by a already selected/checked checkbox?

Hopefully I am clearly enough. Thanks in advance.

$(document).ready(function() {
    $("#emp_grid td").click(function(e) {
        $("#emp_grid td").removeClass("product_select");
        var $checkbox = $(this).find(':checkbox');
        $("#emp_grid :checkbox").not($checkbox).removeAttr("checked");
        if (e.target.type == "checkbox") {
            // stop the bubbling to prevent firing the row's click event
            e.stopPropagation();
            $(this).filter(':has(:checkbox)').toggleClass('product_select', $checkbox.attr('checked'));
        } else {
            $checkbox.attr('checked', !$checkbox.attr('checked'));
            $(this).filter(':has(:checkbox)').toggleClass('product_select', $checkbox.attr('checked'));
        }
    });
});

HTML code when the checkbox is selected:

<td class="product_select" colspan="3">
<input name="oplageservice" checked="checked" value="101_6" style="display:none;" type="checkbox"> € 0,01
</td>

HTML code when I uncheck the checkbox:

<td class="product_select" colspan="3">
<input name="oplageservice" value="101_6" style="display:none;" type="checkbox"> € 0,01
</td>

(class 'product_select' is not removed)

Upvotes: 0

Views: 569

Answers (1)

Craig Bezuidenhout
Craig Bezuidenhout

Reputation: 215

can you post the html of the tables ?

edit :

give this a try

            $("#emp_grid td").click(function() { 
                $(this).toggleClass("product_select");
                if ($(this).hasClass("product_select")) { 
                    $(this).find("input[type=checkbox]").attr("checked","checked");
                }else{ 
                    $(this).find("input[type=checkbox]").removeAttr("checked");
                } 
            });

Upvotes: 1

Related Questions