如何隱藏複選框文本

Question

最近我一直在玩HTML，遇到了一個小問題。

讓我們說，有一個表單上有多個元素。其中一些元素是複選框，您想要隱藏複選框及其相應的文本。你如何做到這一點而不隱藏整個表單？下面是我到目前爲止已經試過：

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

但這隱藏框和離開文本「選項1」仍清晰可見。我如何隱藏文字？

Answer 1

我會建議使用周圍的整個事情<label> - 標籤：

<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，但這裏有雲：

你的選擇文本不在輸入內，也不可以（對於複選框），所以你會將它們包裹在容器中，然後隱藏容器。例如：

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

你已經得到使用標籤的一些不同的方式（建議，因爲這使您對您的內容更多的控制）。我上面的例子使用「for」屬性，它是一個指向輸入ID的指針，告訴瀏覽器標籤的輸入字段是什麼（很明顯，是嗎？）。您也可以包裝您的輸入標籤內（像所有其他的答案，這個線程），這是一些人喜歡的方式（包括我）：我看到一個答案

<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您頁面，然後應用此答案中提供的codesnippet。這可以讓你顯示/隱藏輸入+標籤，例如，點擊按鈕左右。如果您想要一些指導，請隨時問我任何問題。 :)

/J。