JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myform">
<div>
    <div class="group">
        <input type="checkbox" name="member" id="cb_member"><label for="cb_member">Member</label>
        <input type="checkbox" name="nonmember" id="cb_nonmember"><label for="cb_nonmember">Non-Member</label>
    </div>
    <div class="group">
        <input type="checkbox" name="enduser" id="cb_enduser"><label for="cb_enduser">End user</label>
        <div class="subgroup">
            <input type="checkbox" name="eu_res" id="cb_eu_res"><label for="cb_eu_res">Research</label>
            <input type="checkbox" name="eu_com" id="cb_eu_com"><label for="cb_eu_com">Commercial</label>
        </div>
    </div>
    <div class="group">
        <input type="checkbox" name="var" id="cb_var"><label for="cb_var">VAR</label>
        <div class="subgroup">
            <input type="checkbox" name="var_res" id="cb_var_res"><label for="cb_var_res">Research</label>
            <input type="checkbox" name="var_com" id="cb_var_com"><label for="cb_var_com">Commercial</label>
        </div>
    </div>
    <div class="group">
        <input type="checkbox" name="eval" id="cb_eval"><label for="cb_eval">Evaluation</label>
        <div class="subgroup">
            <input type="checkbox" name="eval_res" id="cb_eval_res"><label for="cb_eval_res">Research</label>
            <input type="checkbox" name="eval_com" id="cb_eval_com"><label for="cb_eval_com">Commercial</label>
        </div>
    </div>
</div>
            
<table>
    <th>
        <td></td>
        <td class="td_member">Member</td>
        <td class="td_nonmember">Non-Member</td>
    </th>
    <tr class="tr_eu">
        <td rowspan="3" id="td_eu">End User</td>
    </tr>
    <tr class="tr_eu tr_res">
        <td>Research</td>
        <td class="td_member"><input name="eu_res_member_price"></td>
        <td class="td_nonmember"><input name="eu_res_nonmember_price"></td>
    </tr>
    <tr class="tr_eu tr_com">
        <td>Commercial</td>
        <td class="td_member"><input...

CSS

form { margin: 1em; }
       
      table { border-collapse: collapse; }
       

      th, td { padding: 0.25em 1em;
               border: solid thin gray; }
       
      input[type=text] { border: solid thin silver;
                         border-radius: 2px;
                         box-shadow: inset 1px 1px 2px -1px #999;
                         color: black;
                         background: white; }

JavaScript

var updateTable = function()
{

//Colonne pour le member
  var member = document.getElementById('cb_member');
  var m = document.getElementsByClassName('td_member');
    for (var i=0; i<m.length; i++)
    {
      m[i].style.display = (member.checked)? '' : 'none';
    }

//Colonne pour le nom member
  var nonmember = document.getElementById('cb_nonmember');
  var nm = document.getElementsByClassName('td_nonmember');
    for (var i=0; i<nm.length; i++)
    {
      nm[i].style.display = (nonmember.checked)? '' : 'none';   
    }

//Ligne pour le End-User - Research
  var eu_res = document.getElementById('cb_eu_res');
  var end_res = document.getElementsByClassName('tr_eu tr_res');
    for (var i=0; i<end_res.length; i++)
    {
      end_res[i].style.visibility = (eu_res.checked)? '' : 'hidden';  
    }

//Ligne pour le End-User - Commercial
  var eu_com = document.getElementById('cb_eu_com');
  var end_com = document.getElementsByClassName('tr_eu tr_com');
    for (var i=0; i<end_com.length; i++)
    {
      end_com[i].style.visibility = (eu_com.checked)? '' : 'hidden';   
    }

}
document.getElementById('myform').addEventListener('change', updateTable);