Como posso fazer uma alternância opção de clicar no rótulo de texto, bem como?

votos
29

Checkboxesem HTMLformas não têm implícitos etiquetas com eles. Adicionando um rótulo explícito (algum texto) próximo a ele não alternar a checkbox.

Como posso fazer uma alternância opção de clicar no rótulo de texto, bem como?

Publicado 05/08/2008 em 12:51
fonte usuário
Em outras línguas...                            


8 respostas

votos
43

Se você marcação corretamente seu código HTML, não há necessidade de javascript. O código a seguir permitirá que o usuário a clicar sobre o texto do rótulo para marcar a caixa de seleção.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

O para atributo nos links elemento label para o ID de atributo no elemento de entrada eo navegador faz o resto.

Este tem vindo a testar a trabalhar em:

  • IE6
  • IE7
  • Raposa de fogo
Respondeu 05/08/2008 em 13:00
fonte usuário

votos
17

Defina o CSS displaypropriedade para o rótulo de ser um elemento de bloco e o uso que em vez de sua div - que mantém o significado semântico de uma etiqueta ao mesmo tempo permitindo que qualquer que seja o estilo que você gosta.

Por exemplo:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Respondeu 05/08/2008 em 13:52
fonte usuário

votos
3

Como indicado por @Gatekiller e outros, a solução correta é a tag <label>.

Clique-in-the-texto é bom, mas há outra razão para usar o <label> tag: acessibilidade. As ferramentas que as pessoas com deficiência visual usar para acessar a web precisa do <label> s para leitura o significado de caixas de seleção e botões de rádio. Sem <label> s, eles têm que adivinhar com base em torno de texto, e que muitas vezes errar ou ter que desistir.

É muito frustrante para ser confrontado com uma forma que lê "Por favor, selecione seu método de envio, rádio-button1, rádio-button2, rádio-button3".

Note-se que a acessibilidade web é um assunto complexo; <label> s são um passo necessário, mas eles não são suficientes para garantir a acessibilidade ou a conformidade com regulamentações governamentais, onde se aplica.

Respondeu 25/08/2008 em 16:21
fonte usuário

votos
2

Ronnie,

Se você quiser incluir o texto da etiqueta e caixa dentro de um elemento wrapper, você pode fazer o seguinte:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Respondeu 05/08/2008 em 13:28
fonte usuário

votos
1

Você pode quebrar o seu caixa no rótulo:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Respondeu 05/08/2008 em 13:25
fonte usuário

votos
0

Você precisa apenas enrole a caixa de seleção na tag label como este

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

FIDDLE

ou você também pode usar o para atributo de etiqueta e ID de seu caixa de seleção como abaixo

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

FIDDLE

Respondeu 01/09/2015 em 12:10
fonte usuário

votos
-1

isso deve funcionar:

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

se ele não, pleae corect me!

Respondeu 09/03/2015 em 12:13
fonte usuário

votos
-2

Envolvimento com o rótulo ainda não permite clicar 'em qualquer lugar na caixa' - ainda apenas sobre o texto! Isso faz o trabalho para mim:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

mas, infelizmente, tem muitos javascript que é efetivamente alternando duas vezes.

Respondeu 05/08/2008 em 13:34
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more