Добавить текст в таблицу при установленном флажке Использование Jquery

Question

У меня есть список параметров вместе с флажками, где я могу искать и выбирать необходимые параметры в таблице. Теперь я хочу установить значения для выбранных параметров. Для этого я создал текстовые поля (Имя параметра, Тип данных, Установить значение) в формате таблицы . Когда я устанавливаю флажок в таблице параметров, текстовые поля в таблице должны быть созданы с выбранными параметрами. когда я снимаю флажок, текстовые поля должны удаляться. Например, если я выбираю один параметр «TestingDevice» из таблицы параметров, в текстовых полях должно быть создано значение с «TestingDevice», а другие значения DataType и Set должны вводиться пользователем вручную. Ниже кода, который я использую.

Список параметров

<div class="tab-content">
       <div id="Device_B" class="tab-pane fade in active">
         <div class="col-md-12">
          <div class="col-md-6" style="overflow: auto">
          <br>
          <input type="text" class="form-control" id="customGroupAddParamInput" onkeyup="addParameterTableSearchFunction()" placeholder="Search &#x1F50D; :">
            <br>
          <h4>All Parameters</h4>
          <div class="span5 border-0" style="overflow: auto">    
          <table id="customGroupAddParamTable" class="table table-bordered">
            <thead>
            <tr class="info">
              <th style="width: 10px;">
                <input type="checkbox" id="check_selectall_custom_B[]" onclick="selectAllCustom(this)"/>SA</th>
              <th>Parameter Name</th>
            </tr>
            </thead>
            <tbody class="parameter_table">
            <% @all_br_parameters.each do |parameter| %>
              <tr id="tr_rb_<%=parameter['id'] %>">
                <td>
                  <input type="checkbox" class="checkBox" name="checkBox_custom_B[]" onchange="clickedParamBox(this.name)">
                </td>
                <td style="word-break:break-all;">
                  <%= parameter['parameter_name']%>
                </td>
              </tr>
            <% end %>
            </tbody>
          </table>
         </div>
         </div>

Таблица для текстового поля

<div class="tab-content" >
        <div id="protocol" class="tab-pane fade in active">
        <div class="span3 border-0" style="overflow: scroll"> 
        <table id="addParamTable" class="table table-bordered">
        <thead>
        <tr class="info">
          <th>Parameter Name</th>
          <th>Data Type</th>
          <th>Expected Set Value</th>

        </tr>
        </thead>
        <tbody class="parameter_table">
        <tr>
            <td>
              <input type="text" id="parameterName" class="parameterName" name="parameter_name">
            </td>
            <td>
              <input type="text" class="parameterDscription" name="parameter_description">
            </td>
            <td>
              <input type="text" class="expectedValue" name="expected_value">
            </td>
          </tr>
          </tbody>
      </table>

Answer 1

Попробуйте это: вот как бы я с этим справился.

  $(document).ready(function() {
        window.addEventListener('load', (event) => {
            checkbox = document.getElementById("checkbox_to_be_evaluated");
            textbox = document.getElementById("textbox_to_be_displayed_or_hidden");
            evaluateCheckbox(checkbox, textbox);
        });

        $(checkbox).click(function(){
            evaluateCheckbox(checkbox, textbox)
        });

        function evaluateCheckbox(checkbox, textbox) {
            //take in element of checkbox
            if(checkbox.checked){
                textbox.style.display = "block";
            }else {
                textbox.style.display = "none";
            }
            //handle accordingly
        };
    });