Add the class in each row of the table - php

Question

I am working on my code as I have got a list of checkboxes in the table. I have got a problem with adding the class in each row because it will only add one class in one row when I select all the checkboxes and click on a button.
Here is the checkboxes:
<tr class="read" data-id="236'" data-url="TTNsN1UxWXh5LzYwUjZaSlR1Qk4xZz09" data-sort="1556928960">
<td class="inbox-small-cells">
<div id="mail_checkbox" name="mail_checkbox">
<input type="checkbox" id="mail_checkbox1" name="mail_checkbox1" class="mail-check" unchecked="">
</div>
</td>
<td class="inbox-small-cells"><i class="fa fa-star"></i></td>
<td class="view-message dont-show">
<div id="mail_check">Rob <myname#example.com></rob#example.com></div>
</td>
<td class="view-message">
<div id="mail_check">Hey!</div>
</td>
<td class="view-message inbox-small-cells">
<div id="mail_check"></div>
</td>
<td class="view-message text-right">
<div id="mail_check">04 May</div>
</td>
</tr>
<tr class="read" data-id="235'" data-url="U21hT0hpemZRUWlwUmN3amVjMUJzQT09" data-sort="1556479689">
<td class="inbox-small-cells">
<div id="mail_checkbox" name="mail_checkbox">
<input type="checkbox" id="mail_checkbox1" name="mail_checkbox1" class="mail-check" unchecked="">
</div>
</td>
<td class="inbox-small-cells"><i class="fa fa-star"></i></td>
<td class="view-message dont-show">
<div id="mail_check">Shibbir <name2#example.com></creativeartbd#gmail.com></div>
</td>
<td class="view-message">
<div id="mail_check">Image in body and attachement</div>
</td>
<td class="view-message inbox-small-cells">
<div id="mail_check"><i class="fa fa-paperclip"></i></div>
</td>
<td class="view-message text-right">
<div id="mail_check">28 Apr</div>
</td>
</tr>
<tr class="read" data-id="234'" data-url="NWpoUGcwK1lIb2tJQWlzR0grQVhEUT09" data-sort="1556479271">
<td class="inbox-small-cells">
<div id="mail_checkbox" name="mail_checkbox">
<input type="checkbox" id="mail_checkbox1" name="mail_checkbox1" class="mail-check" unchecked="">
</div>
</td>
<td class="inbox-small-cells"><i class="fa fa-star"></i></td>
<td class="view-message dont-show">
<div id="mail_check">Shibbir <name2#example.com></creativeartbd#gmail.com></div>
</td>
<td class="view-message">
<div id="mail_check">checking message body</div>
</td>
<td class="view-message inbox-small-cells">
<div id="mail_check"></div>
</td>
<td class="view-message text-right">
<div id="mail_check">28 Apr</div>
</td>
</tr>
I have tried this:
$(document).on('click','#Markasunread',function() {
alert("you are working on Markasunread now chris");
$("#mail_checkbox1").each(function() {
if ($(this).prop('checked') == true) {
$(".mail-check").prop("checked", false);
$("#select_all").prop("checked", false);
$(this).addClass("unread");
}
});
});
And I have also tried this:
$(document).on('click','#Markasunread',function() {
$("#mail_checkbox1").each(function() {
if ($(this).prop('checked') == true) {
$(".mail-check").prop("checked", false);
$("#select_all").prop("checked", false);
$(this).closest("tr").addClass("unread");
}
});
});
And this:
$(document).on('click','#Markasunread',function() {
$("#mail_checkbox1").each(function() {
if ($(this).prop('checked') == true) {
$(".mail-check").prop("checked", false);
$("#select_all").prop("checked", false);
$("#mail_checkbox1").closest("tr").addClass("unread");
}
});
});
What I am trying to achieve is when I select all the checkboxes and click on a button, I want to remove the class "read" and add the class "unread" in each row where the ticked checkboxes are.
Can you please show me an example how I could add the class for each row in the table where the ticked checkboxes are?
Thank you.

Answer 1

You arent allowed to use an ID more than once. So change the ID´s to a unique one.
Also try to use better JQuery Selectors. With "table input:checked" you´ll get all checked input fields inside your table. Now you can loop them to get the parent tr and add the unread class.
$('#actionButton').click(event => {
let inputs = $('table input:checked').toArray();
inputs.forEach(input => {
$(input).closest('tr').addClass('unread');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="read" data-id="236'" data-url="TTNsN1UxWXh5LzYwUjZaSlR1Qk4xZz09" data-sort="1556928960">
<td class="inbox-small-cells">
<div id="1_1" name="mail_checkbox">
<input type="checkbox" id="mail_checkbox1" name="mail_checkbox1" class="mail-check" unchecked="">
</div>
</td>
<td class="inbox-small-cells"><i class="fa fa-star"></i></td>
<td class="view-message dont-show">
<div id="1_2">Rob
<myname#example.com>
</rob#example.com>
</div>
</td>
<td class="view-message">
<div id="1_3">Hey!</div>
</td>
<td class="view-message inbox-small-cells">
<div id="1_4"></div>
</td>
<td class="view-message text-right">
<div id="1_5">04 May</div>
</td>
</tr>
<tr class="read" data-id="235'" data-url="U21hT0hpemZRUWlwUmN3amVjMUJzQT09" data-sort="1556479689">
<td class="inbox-small-cells">
<div id="2_1" name="mail_checkbox">
<input type="checkbox" id="mail_checkbox2" name="mail_checkbox1" class="mail-check" unchecked="">
</div>
</td>
<td class="inbox-small-cells"><i class="fa fa-star"></i></td>
<td class="view-message dont-show">
<div id="2_2">Shibbir
<name2#example.com>
</creativeartbd#gmail.com>
</div>
</td>
<td class="view-message">
<div id="2_3">Image in body and attachement</div>
</td>
<td class="view-message inbox-small-cells">
<div id="2_4"><i class="fa fa-paperclip"></i></div>
</td>
<td class="view-message text-right">
<div id="2_5">28 Apr</div>
</td>
</tr>
<tr class="read" data-id="234'" data-url="NWpoUGcwK1lIb2tJQWlzR0grQVhEUT09" data-sort="1556479271">
<td class="inbox-small-cells">
<div id="3_1" name="mail_checkbox">
<input type="checkbox" id="mail_checkbox3" name="mail_checkbox1" class="mail-check" unchecked="">
</div>
</td>
<td class="inbox-small-cells"><i class="fa fa-star"></i></td>
<td class="view-message dont-show">
<div id="3_2">Shibbir
<name2#example.com>
</creativeartbd#gmail.com>
</div>
</td>
<td class="view-message">
<div id="3_3">checking message body</div>
</td>
<td class="view-message inbox-small-cells">
<div id="3_4"></div>
</td>
<td class="view-message text-right">
<div id="3_5">28 Apr</div>
</td>
</tr>
</tbody>
</table>
<input type="button" id="actionButton" value="Change">