6

Delete the highlighting of the previous row

 2 years ago
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.
neoserver,ios ssh client

Delete the highlighting of the previous row

advertisements

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');
});

Fiddle


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK