JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tableau">
    <table>
        <thead>
            <tr class="en_tete">
                <th></th>
                <th>Marque</th>
                <th>Modele</th>
                <th>Couleur</th>
                <th>Nb Options</th>
            </tr>
        </thead>
        <tbody>
            <TR class="ligne_tableau_1">
                <TD rowSpan="2">
                    <INPUT type="checkbox" name="choix" value="1" />
                </TD>
                <TD rowSpan="2">citroen</TD>
                <TD rowSpan="2">picasso</TD>
                <TD>blanc</TD>
                <TD>2</TD>
            </TR>
            <TR class="ligne_tableau_1">
                <TD>bleue</TD>
                <TD>18</TD>
            </TR>
            <TR class="ligne_tableau_2">
                <TD rowSpan="2">
                    <INPUT type="checkbox" name="choix" value="1" />
                </TD>
                <TD rowSpan="2">peugeot</TD>
                <TD rowSpan="2">208</TD>
                <TD>rouge</TD>
                <TD>2</TD>
            </TR>
            <TR class="ligne_tableau_2">
                <TD>grise</TD>
                <TD>5</TD>
            </TR>
            <TR class="ligne_tableau_3">
                <TD rowSpan="2">
                    <INPUT type="checkbox" name="choix" value="1" />
                </TD>
                <TD rowSpan="2">porshe</TD>
                <TD rowSpan="2">boxer</TD>
                <TD>blanche</TD>
                <TD>2</TD>
            </TR>
            <TR class="ligne_tableau_3">
                <TD>noire</TD>
                <TD>10</TD>
            </TR>
            <TR class="ligne_tableau_4">
                <TD rowSpan="3">
                    <INPUT type="checkbox" name="choix" value="1" />
                </TD>
                <TD rowSpan="3">renault</TD>
                <TD rowSpan="3">laguna</TD>
                <TD>rouge</TD>
                <TD>10</TD>
            </TR>
            <TR...

CSS

html, body {
    height:100%;
    margin: 0;
}
table {
    margin-top:40px;
    margin-left:20px;
    text-align:center;
    border-collapse:collapse;
}
td, th {
    padding:3px;
    border: 1px solid black;
    empty-cells:hide;
}
label {
    display: block;
    width: 150px;
    float: left;
}

JavaScript

// Fonction JS pour sélectionner les lignes (coche la case et change la couleur)
$('tr').click(function () {
    "use strict"; // active le mode strict

    var $this = $(this); // Sélectionne le <tr>

    // Si on clique sur l'en-tête, on ne fait rien
    if ($this.hasClass("en_tete")) return;

    // Récupère l'élément checkbox pour tester sa valeur et agir dessus
    var $case_a_cocher = $this.find("input[type='checkbox']");
    // syntaxe alternative :
    // var $case_a_cocher = $("input[type='checkbox']", $this);

    var test = $case_a_cocher.is(":checked"); // Teste la valeur de la case
    console.log("case cochée :", test);

    if ($case_a_cocher.is(":checked")) {
        $case_a_cocher.prop("checked", false);
        $this.css("background-color", "transparent");
    } else { // Si la case n'est pas cochée
        $case_a_cocher.prop("checked", true);
        $this.css("background-color", "#e9f8ff");
    }

    test = $case_a_cocher.is(":checked");
    console.log("case cochée :", test);
});