я хочу создать веб-сайт, на котором нужно, чтобы имя ярлыка и раскрывающийся список отображались одновременно, когда установлен флажок

Question

   `<td><input` `id="checkbox1"type="checkbox"onclick="showHide();"checked="checked"/>` 
    `<label for = "checkbox1">color</label></td>` 

это код для флажка

    `'<td><select id ="paint">'
     '<option>red</option>'
     '<option>purple</option>'
     '<option>pink</option>'`

это код для раскрывающегося списка

   `<td><label>painting</label></td>` 

это код для этикетки

<script> function showHide()

{ if(document.getElementById('checkbox1').checked) { document.getElementById('paint').style.visibility='visible'; } else { document.getElementById('paint').style.visibility='hidden'; } }

это лог c код

, когда пользователь устанавливает флажок, и имя ярлыка, и раскрывающийся список должны отображаться, если пользователь не проверяет флажок, и имя ярлыка, и раскрывающийся список должны быть скрыты, но мой код работает только для раскрывающегося списка, я хочу даже для ярлыка, также, пожалуйста, помогите мне с этим, я борюсь с прошлыми 2 днями.

Answer 1

Простой способ - присвоить тег id to <label> и использовать .style.display="none", чтобы скрыть и показать тег <label>. Ниже приведен демонстрационный код:

showHide();
function showHide()

{
  if (document.getElementById('checkbox1').checked) {
    document.getElementById('paint').style.visibility = 'visible';
    //to show label
    document.getElementById("mylabel").style.display = "";
  } else {
    document.getElementById('paint').style.visibility = 'hidden';
    //to hide label
    document.getElementById("mylabel").style.display = "none";
  }
}

<table>
  <tr>
    <td><input id="checkbox1" type="checkbox" onclick="showHide();"  /><label for="checkbox1">color</label></td>
  </tr>
  <tr>
    <td>
    <!--here i have given id to label-->
      <label id="mylabel">painting</label></td>
    <td>
      <select id="paint">
        <option>red</option>
        <option>purple</option>
        <option>pink</option>
      </select>
    </td>
  </tr>
</table>