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

tr.selected {
    background: #BEF;
}
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

// surveille seulement les lignes du <tbody>, comme ça on évite l'en-tête
$("tbody tr").click(function (event) {
    "use strict";
    var $this = $(this);
    var $target = event.target;

    // part vers le haut pour trouver la première ligne du "groupe",
    // celle qui contient la checkbox
    var $group = $this;
    var $row = $this;
    while (!$row.find("input[type='checkbox']").length) {
        $row = $row.prev();
        $group = $group.add($row);
    }

    var rowspan = parseInt($row.find("td[rowspan]").attr("rowspan"),
    10) || 1;

    // part vers le bas pour inclure toutes les lignes du groupe
    while ($group.length < rowspan) {
        $group = $group.add($group.next());
    }

    var $case_a_cocher = $row.find("input[type='checkbox']");
    var checked = $case_a_cocher.is(":checked");

    // choisit l'action à effectuer selon l'état de la checkbox
    var action = {
        true: "removeClass",
        false: "addClass"
    };

    if ($case_a_cocher.is($target)) {
        $group[action[!checked]]("selected");
        // si la case est la cible du click, on n'y touche pas
    } else {
        $group[action[checked]]("selected");
        $case_a_cocher.prop("checked", !checked);
    }
    // j'aurais pu factoriser encore plus à l'aide d'un OU exclusif,
    // mais ça serait devenu carrément tordu
});