Как спрятать флаговый текст

Question

Я играл с html в последнее время и столкнулся с небольшой проблемой.

Скажем, что на нем есть форма с несколькими элементами. Некоторые из этих элементов являются флажками, и вы хотите скрыть флажки и их соответствующий текст. Как вы это делаете, не скрывая всю форму? Ниже то, что я пытался до сих пор:

<input type="checkbox" id=check1 status="display:none">Option 1<br> 

Но это скрывает окно и оставляет текст «Вариант 1» все еще видимый. Как мне скрыть текст?

Answer 1

Я предложил бы использовать <label> -tag вокруг всего:

<label style="display:none"><input type="checkbox" id="check1">Option 1</label> 

Таким образом, вы можете скрыть вся строка и пользователь имеют то преимущество, что флажок переключается, если он нажимает на текст. Вы также получаете семантику.

Также обратите внимание, что status недействительный атрибут. Для стилизации используйте style.

Answer 2

вам нужно обернуть его в двускатной/ярлыком, а затем скрыть его

<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br> 

Answer 3

<span style="display:none"><input ...>Option 1</span> 

или лучше

<label for="check1" style="display:none"><input id="check1"...>Option 1</label><br/> 

Answer 4

Место Флажок внутри сНу и применить стиль к Div

<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div> 

Answer 5

Я уверен, что вы имеете в виду style="display:none и не status, но здесь идет:

Текст вашего варианта не находится внутри входа, и он не может быть (для флажка), поэтому вы будете h чтобы упаковать их в контейнер, а затем скрыть контейнер. Что-то вроде:

<div id="checkboxcontainer" style="display: none"> 
    <input type="checkbox" id="check1"> 
    Option 1 
    <br> 
</div> 

Answer 6

Оберните ввод в div и примените тег «style» к div.

<div style="display: none;"> 
    <input type="checkbox" id="check1">Option 1<br> 
</div> 

Answer 7

<input type="checkbox" id="check1" style="display:none"> 
<label for="check1">Option 1</label><br> 

JS:

$('label[for="check1"]').hide(); 

Answer 8

попробовать что-то вроде этого

<label style="display:none"><input type="checkbox" id=check1 >Option 1</label> 

Answer 9

увидеть это JQuery ... это может помочь вам

$(document).ready(function(){ 

     //Hide div w/id extra 
     $("#extra").css("display","none"); 

     // Add onclick handler to checkbox w/id checkme 
     $("#checkme").click(function(){ 

     // If checked 
     if ($("#checkme").is(":checked")) 
     { 
      //show the hidden div 
      $("#extra").show("fast"); 
     } 
     else 
     { 
      //otherwise, hide it 
      $("#extra").hide("fast"); 
     } 
     }); 

    }); 

Answer 10

Используйте ниже, чтобы получить необходимую вам информацию.

Оберните все с помощью label, который затем позволит вам использовать style="display:none, чтобы скрыть label.

<label style="display:none"><input type="checkbox" id="check1">Option 1</label> 

Вы также использовали status вместо style но используя код выше вы будете делать хорошо.

Answer 11

Хорошо, так как другие ответы не были такими, что описываю, что я могу идти дальше и быть немного более педагогическим. Прежде всего, написанный вами код прекрасен, однако вы теряете некоторый контроль над своим контентом, если он не обернут внутри HTML-тега. Как и все другие ответы здесь писали, вы, очевидно, нужен ярлык с входным тэгом:

<input type="checkbox" id="check1"><label for="check1" >Option 1</label> 

У вас есть несколько различных способов использования меток (это рекомендуется, так как это дает вам больший контроль над содержанием). В приведенном выше примере используется атрибут «для», который является указателем на идентификатор ввода, чтобы сообщить браузеру, в каком поле ввода находится метка (совершенно очевидно, а?). Вы также можете обернуть ввод внутри метки (как и все остальные ответы на эту тему), который является, как некоторые люди предпочитают (включая меня):

<label for="check1"><input type="checkbox" id="check1">Option 1</label> 

Я видел ответ, где человек, который написал некоторые (что он называл) JS, который является кодом, который скрывает метку с завернутым вводом (т. е. метка И ввод скрыт). Тем не менее, это был JS, который также с помощью JQuery, так что вы должны реализовать эту структуру, прежде чем вы можете использовать этот фрагмент кода:

$('label[for="check1"]').hide(); //This hides the label and the input at the same time if you wrap your input! 

Я рекомендую вам использовать обернутую версию разметки и реализацию JQuery на вашем и затем примените код, который указан в этом ответе. Это может дать вам возможность отображать/скрывать входы + метки, например, щелчок на кнопке или так далее. Не стесняйтесь спрашивать меня, если вы хотите получить какое-то руководство. :)

/J.