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...

CSS

html, body
{
	height:100%;
}



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

$( function(){

    $("#tableau").find("[class^=ligne_tableau]").on('click', function(){
    ligne=$(this).attr('class').match(/\d/)[0];
   
        $chk=$('.ligne_tableau_'+ligne+' td:eq(0)').find(':checkbox') ;
      
        $chk.prop('checked', !$chk.prop('checked'));
        
        $('.ligne_tableau_'+ligne).css({'background-color':($chk.prop('checked'))?"lightblue":""})
    })
    
    $("#tableau :checkbox").on('click', function(){
        $(this).parents('tr:eq(0)').trigger('click');
    })
        
})