Como criar uma caixa de seleção com um rótulo clicável?

Como posso criar uma caixa de seleção HTML com um rótulo clicável (isso significa que clicar no rótulo ativa / desativa a caixa de seleção)?

Método 1: Wrap Label Label

Coloque a caixa de seleção em uma labeltag:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

Método 2: usar o foratributo

Use o foratributo (corresponda à caixa de seleção id):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

NOTA : O ID deve ser exclusivo na página!

Explicação

Como as outras respostas não o mencionam, um rótulo pode incluir até 1 entrada e omitir o foratributo, e será assumido que é para a entrada nele.

Trecho de w3.org (com minha ênfase):

[O atributo for] associa explicitamente o rótulo que está sendo definido com outro controle. Quando presente, o valor desse atributo deve ser igual ao valor do atributo id de algum outro controle no mesmo documento. Quando ausente, o rótulo que está sendo definido está associado ao conteúdo do elemento.

Para associar um rótulo a outro controle implicitamente, o elemento de controle deve estar dentro do conteúdo do elemento LABEL . Nesse caso, o LABEL pode conter apenas um elemento de controle. O próprio rótulo pode ser posicionado antes ou depois do controle associado.

O uso desse método tem algumas vantagens sobre for:

• Não é necessário atribuir um ida cada caixa de seleção (ótimo!).

• Não é necessário usar o atributo extra no arquivo <label>.

• A área clicável da entrada também é a área clicável do rótulo, portanto, não há dois lugares separados para clicar que possam controlar a caixa de seleção - apenas um, independentemente da distância entre o <input>texto real e o rótulo real, e não importa que tipo de CSS você aplicar a ele.

Demonstração com algum CSS:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

Apenas verifique se o rótulo está associado à entrada.

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

Você também pode usar pseudo-elementos CSS para escolher e exibir seus rótulos de todos os atributos de valor da sua caixa de seleção (respectivamente).
Editar: Isso funcionará apenas com navegadores baseados em webkit e piscantes (Chrome (ium), Safari, Opera ....) e, portanto, na maioria dos navegadores móveis. Não há suporte para Firefox ou IE aqui.
Isso pode ser útil apenas ao incorporar webkit / piscar em seus aplicativos.

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

Todos os rótulos de pseudo-elemento poderão ser clicados.

Demonstração: http://codepen.io/mrmoje/pen/oteLl , + A essência disso

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

Também funciona:

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

Isso deve ajudá-lo: W3Schools - Labels

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

Use o labelelemento e o foratributo para associá-lo à caixa de seleção:

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

Etiqueta de material angular com caixa de seleção

<mat-checkbox>Check me!</mat-checkbox>

Usa isto

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});