Checkbox select with table color changing

Question

I created a table where I want to add one function if user click masterCheckBox to that select all checkbox or selectbox one-by-one then change the table>tr background color from default to red. so that user can determine which table>tr he/she is selected by checkbox same vice-versa, when checkbox not check tr background becomes default as white and then perform ajax as in my code.

1> Finally I made all function but I not able to do change background color effect which tr is selected.

2> Remove check from master checkbox after ajax success.

Note : I search on stackoverflow and google about this but I not get the satisfied answer and tried to do make by showing various post on stackoverflow, But I am not able to make this finally, Please do not mark this post as on hold and duplicate and other. Please help me.

In my case for selecting all checkbox the code is below.

Select All CheckBox

$("#myFunctionCheckAll").click(function() {
var checkedStatus = $(this).find('span').hasClass('checked');
    $("#mailBody tr .chChildren input:checkbox").each(function() {
        this.checked = checkedStatus;
            if (checkedStatus == this.checked) {
                $(this).closest('.checker > span').removeClass('checked');
            }
            if (this.checked) {
                $(this).closest('.checker > span').addClass('checked');
            }
    });
});

CSS

.removeRow {
  background-color: #c2dbff;
  color:#FFFFFF;
}

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

    var id = [];

    $(':checkbox:checked').each(function(i) {
        id[i] = $(this).val();
//Issue Come 
if($(this).is(':checked'))
    {
        $(this).closest('tr').addClass('removeRow');
    }
    else
    {
        $(this).closest('tr').removeClass('removeRow');
    }
//Issue end
    });

    if (id.length === 0) {
        alert("Please Select atleast one checkbox");
    } else {
        if (confirm("Are you sure you want to delete this?")) {
            $.ajax({
                url: 'deletetr.php',
                method: 'POST',
                data: {
                    id: id
                },
                success: function() {
                    for (var i = 0; i < id.length; i++) {
                        $('tr#' + id[i] + '').css('background-color', '#f5f5f5');
                        $('tr#' + id[i] + '').fadeOut('normal');
                    }
                }

            });
        } else {
            return false;
        }
    }

});

<a id="myFunctionCheckAll" title="selectAllCheckboxOnce"><span class="option-link square"><input type="checkbox"></span></a>

<a id="btn_delete"><span class="option-link trash"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></span>Delete</a>

<table width="100%" cellpadding="2" cellspacing="0" border="0" class="th" id="mailBody">

    <tr class="message-row" id="3205">

        <td width="1%" class="chChildren">

            <input type="checkbox" name="name[]" class="action" value="3205">
            <img style="width: 40px; height: 40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6Mwikrsp1V3kTV0chB1-B5cjYfabyyxKgJthlsrwW2fcOJOIw" alt="username" class="class" />

        </td>

        <td width="25%">
            <span class="snds">
                        <span class='credentials'>Name</span> </span>
            <span class="label grey-label label-right">Label</span>

        </td>

        <td width="73%">

            <a data-urlajaxMail="#" class="messagedetails">
                <span class="ts">406924241</span>
                <font color="#7777CC">
                                    <span class="elps">773980766</span>
                                </font>
            </a>
        </td>

        <td width="1%" nowrap="">
            7 mins ago </td>

    </tr>

    <tr class="message-row" id="3205">

        <td width="1%" class="chChildren">

            <input type="checkbox" name="name[]" class="action" value="3205">
            <img style="width: 40px; height: 40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6Mwikrsp1V3kTV0chB1-B5cjYfabyyxKgJthlsrwW2fcOJOIw" alt="username" class="class" />

        </td>

        <td width="25%">
            <span class="snds">
                        <span class='credentials'>Name</span> </span>
            <span class="label grey-label label-right">Label</span>

        </td>

        <td width="73%">

            <a data-urlajaxMail="#" class="messagedetails">
                <span class="ts">406924241</span>
                <font color="#7777CC">
                                    <span class="elps">773980766</span>
                                </font>
            </a>
        </td>

        <td width="1%" nowrap="">
            7 mins ago </td>

    </tr>

</table>

Wang Liang · Answer 1 · 2019-11-19T05:50:45.530

$(document).ready(function () {

    $("#mailBody tr .chChildren input:checkbox").change(function () {
        if ($(this).prop('checked')) {
            $(this).closest('tr').addClass('removeRow');
        } else {
            $(this).closest('tr').removeClass('removeRow');
        }
    });

    $("#myFunctionCheckAll").click(function () {
        var checkedStatus = $('#myFunctionCheckAll input:checkbox').prop('checked')
        $("#mailBody tr .chChildren input:checkbox").each(function () {
            $(this).prop('checked', checkedStatus).change();
        });
    });

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

        var id = [];

        $('#mailBody tr .chChildren input:checkbox:checked').each(function (i) {
            id[i] = $(this).val();
        });

        if (id.length === 0) {
            alert("Please Select atleast one checkbox");
        } else {
            if (confirm("Are you sure you want to delete this?")) {
                $.ajax({
                    url: 'http://localhost/deletetr.php',
                    method: 'POST',
                    data: {
                        id: id
                    },
                    success: function () {
                        for (var i = 0; i < id.length; i++) {
                            console.log(id[i])
                            $(`tr#${id[i]}`).css('background-color', '#f5f5f5');
                            $(`tr#${id[i]}`).fadeOut('normal');
                        }
                    }

                });
            } else {
                return false;
            }
        }

    });
});

.removeRow {
    background-color: #c2dbff;
    color: #FFFFFF;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <a id="myFunctionCheckAll" title="selectAllCheckboxOnce">
        <span class="option-link square"><input type="checkbox"></span>
    </a>
    <br>
    <br>
    <br>

    <a id="btn_delete"><span class="option-link trash">
            <i class="fa fa-trash fa-lg" aria-hidden="true"></i></span>Delete
    </a>
    <br>
    <br>
    <br>

    <table width="100%" cellpadding="2" cellspacing="0" border="0" class="th" id="mailBody">

        <tr class="message-row" id="3205">

            <td width="1%" class="chChildren">

                <input type="checkbox" name="name[]" class="action" value="3205">
                <img style="width: 40px; height: 40px"
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6Mwikrsp1V3kTV0chB1-B5cjYfabyyxKgJthlsrwW2fcOJOIw"
                    alt="username" class="class" />

            </td>

            <td width="25%">
                <span class="snds">
                    <span class='credentials'>Name</span> </span>
                <span class="label grey-label label-right">Label</span>

            </td>

            <td width="73%">

                <a data-urlajaxMail="#" class="messagedetails">
                    <span class="ts">406924241</span>
                    <font color="#7777CC">
                        <span class="elps">773980766</span>
                    </font>
                </a>
            </td>

            <td width="1%" nowrap=""> 7 mins ago </td>

        </tr>

        <tr class="message-row" id="3206">

            <td width="1%" class="chChildren">

                <input type="checkbox" name="name[]" class="action" value="3206">
                <img style="width: 40px; height: 40px"
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6Mwikrsp1V3kTV0chB1-B5cjYfabyyxKgJthlsrwW2fcOJOIw"
                    alt="username" class="class" />

            </td>

            <td width="25%">
                <span class="snds">
                    <span class='credentials'>Name</span> </span>
                <span class="label grey-label label-right">Label</span>

            </td>

            <td width="73%">

                <a data-urlajaxMail="#" class="messagedetails">
                    <span class="ts">406924241</span>
                    <font color="#7777CC">
                        <span class="elps">773980766</span>
                    </font>
                </a>
            </td>

            <td width="1%" nowrap="">
                7 mins ago </td>

        </tr>

    </table>

Updated:

var checkedStatus = $('#myFunctionCheckAll input:checkbox').prop('checked')
// true or false

$("#mailBody tr .chChildren input:checkbox").each(function () {
    // $(this).prop('checked', checkedStatus) is enough for change its value
    // Also, we need trigger change event with ` ... .change()` 
    $(this).prop('checked', checkedStatus).change();
});

Finally I made all function but I not able to do change background color effect which tr is selected.

// Create checkbox value changed event listener, and in it, add/remove 'removeRow' class from the checkbox status
$("#mailBody tr .chChildren input:checkbox").change(function () {
    if ($(this).prop('checked')) {
        $(this).closest('tr').addClass('removeRow');
    } else {
        $(this).closest('tr').removeClass('removeRow');
    }
});

Remove check from master checkbox after ajax success.

$(`tr#${id[i]}`)  // https://stackoverflow.com/a/610415/11343720

Instead of

$('tr#' + id[i] + '')

Thnks for answer sir, but I am using plugin in checkbox for front-end and so that after clicking master checkbox offcourse selected all tr but not checked in child checkbox. I am using this code for master to child checkbox `https://jsfiddle.net/techWorld/bfrhwak8/4/` — Shubham Singh, Nov 19 '19 at 06:26

Checkbox select with table color changing

1 Answers1