Delete the highlighting of the previous row
source link: https://www.codesd.com/item/delete-the-highlighting-of-the-previous-row.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Delete the highlighting of the previous row
I have a table with checkboxes on each row for selection. Only one box can be checked at a time (similar to radio's). When a box is checked the row hightlights. The highlight is removed when the box is unchecked. However, when the box is checked and I go to check another box without first unchecking the first box, the highlight remains.
How can I remove the highlight of the previously checked box?
HTML Manufacturer Brand Manufacturer's ID Manufacturer's Description Pack Size
</td>
<td>TYSON</td>
<td>BTRBALL</td>
<td>723830124567788</td>
<td>4.0oz Savory White Turkey Burger</td>
<td>40/4oz</td>
<td>
<input type="checkbox" class="checkbox" name="productMatch" />
</td>
</tr>
<tr>
<td><i class="fa fa-plus collapse collapsed" data-toggle="collapse" data-target="#2"></i>
</td>
<td>TYSON</td>
<td>BTRBALL</td>
<td>723830124567788</td>
<td>4.0oz Savory White Turkey Burger</td>
<td>40/4oz</td>
<td>
<input type="checkbox" class="checkbox" name="productMatch" />
</td>
</tr>
</tbody>
jQuery
// allow only one checkbox to be checked.
$(".checkbox").click(function() {
if ($(this).is(":checked")) {
var group = "input:checkbox[name='" + $(this).attr("name") + "']";
$(group).prop("checked", false);
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});
$(".checkbox").change(function () {
$(this).closest("tr").toggleClass("highlight", this.checked);
});
Here's a fiddle of my code
Thanks in advance!
Here's a method you can use:
// highlight row when checkbox is checked.
$(":checkbox").change(function() {
// Highlight the current checkbox row
$(this).closest("tr").toggleClass("highlight", this.checked);
// Uncheck all other checkboxes, then remove the highlight class from their rows
$(':checkbox').not(this).prop('checked', false).closest('tr').removeClass('highlight');
});
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK