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

Respostas:

1916

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>

Wesley Murch
fonte
14
Adore, mas edite novamente. Isso é bom apenas para caixas de seleção. Não vamos incentivar as pessoas a envolver suas outras entradas com rótulos, porque isso quebra o sistema de grade e responsividade móvel será mais difícil de encontrar
Max
1
Se alguém puder explicar o comentário que @John deixou, por favor, faça, porque não faz nenhum sentido para mim.
Wesley Murch
16
@ John, que é um guia de marcação especificamente para inicialização. Se você não estiver usando uma estrutura, ou estiver usando uma estrutura diferente, deve estar completamente bem. Obrigado pela resposta.
Wesley Murch
3
@John. Na página que você vincula, todos os exemplos de autoinicialização incluem a caixa de seleção com rótulo. Não vejo nenhum aviso conforme indicado, talvez não seja mais relevante para a mais recente.
user2144406
2
Como aprendi hoje, não misture o Método 1 e o Método 2. Se você agrupar a caixa de seleção em um rótulo E incluir o for, clicar no rótulo não acionará a caixa de seleção.
BBlake
50

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>
Quentin
fonte
1
Estou confuso com o fato de você ter dado o mesmo nome às duas caixas de seleção e valores diferentes. Isso é de propósito?
precisa saber é
2
@LarsH - Sim, é assim que você cria grupos de caixas de seleção.
Quentin
Obrigado. Eu estava olhando para w3.org/wiki/HTML/Elements/input/checkbox e não foi útil nesse sentido.
precisa saber é
2
Com o PHP, isso não faz com que $ _POST ['foo'] sempre tenha um dos dois valores máximos de uma vez? Mesmo que ambos tenham marcado. O que é um grupo de caixas de seleção?
jeromej
2
@JeromeJ: Para php para lidar com isso corretamente, você tem que adicionar colchetes ao nome, por exemplo: <input type="checkbox" name="foo[]" value="bar" ...>. Isso fornecerá uma matriz que contém os valores de todas as caixas marcadas (que possuem esse nome). Por exemplo, $_POST['foo'][0]pode ser bare $_POST['foo'][1]pode ser baz(se ambos estiverem marcados).
Levite
11

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

mrmoje
fonte
Verdade. Lagartixa e Trident e lagartixa não parecem gostar disso. Isso funcionará apenas com Webkit e Blink. Atualizarei a resposta
mrmoje
3
Votado. Embora seja possível, é uma maneira ruim - não funciona em muitos navegadores, não é bom para acessibilidade.
James Billingham
Problemas de compatibilidade de lado, esta solução não é tão semântica como a resposta superior porque não há nenhuma associação direta na marcação entre o <label> e <input>
deadboy
O "funciona no Webkit / Blink" cheira a um bug usando ( stackoverflow.com/questions/2587669/… ) e, portanto, pode parar de funcionar a qualquer momento.
Xenos
7
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
Dave Kiss
fonte
3
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
ShaneBlake
fonte
1
Uma vez que pode ser confuso para alguns leitores, você deve alterar o namevalor do atributo para diferentes algo que o valor que está presente no fore idatributos, uma vez que estes dois estão relacionados, ao passo que namenão é (é stil obrigatório a ser incluído Acredito embora) .
Dzhuneyt
3

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>
Mystral
fonte
Você pode omitir os atributos fore idno seu exemplo, pois a labeltag possui apenas um elemento de entrada.
Dzhuneyt
2

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>
John
fonte
1
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
Christopher Armstrong
fonte
0

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

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

James Allardice
fonte
0

Etiqueta de material angular com caixa de seleção

<mat-checkbox>Check me!</mat-checkbox>
Arunkumar Ramasamy
fonte
-7

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');
    });
});
Anni
fonte
9
Não é necessário usar JavaScript para fazer isso. Está embutido no HTML.
Lasse Bunk
4
@LasseBunk, se fosse apenas JavaScript, mas toda a biblioteca jQuery é necessária para que isso funcione. Vamos ver se alguém pode encontrar uma solução Angular 2.
laurent