Como fazer uma caixa de seleção alternar a partir de clicar sobre o texto do rótulo bem?

Question

Checkboxes no HTML formas não têm implícito etiquetas com elas.Adicionar explicitamente um marcador (texto) próximo a ele não alternar o checkbox.

Como fazer uma caixa de seleção alternar a partir de clicar sobre o texto do rótulo bem?

Answer 1

Definir o CSS display propriedade para o rótulo de ser um elemento de bloco e de uso que, em vez de sua div - mantém o significado semântico de um rótulo, enquanto 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>

Answer 2

Se você corretamente a marcação do seu código HTML, não há necessidade de javascript.O seguinte código vai permitir que o usuário clique no rótulo de texto para marque a caixa de seleção.

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

O para atributo no elemento label links para o id atributo no elemento de entrada e o navegador faz o resto.

Esse foi o teste para trabalho em:

• O IE6
• IE7
• Firefox

Answer 3

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

Clique no texto é bom, mas há uma outra razão para usar a <label> tag:acessibilidade.As ferramentas que deficientes visuais que as pessoas usam para acessar a web precisa o <label>s para leitura, o significado de caixas de seleção e botões de rádio.Sem <label>s, eles têm de adivinhar com base no texto circundante, e que muitas vezes se é errado ou ter que desistir.

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

Observe que a acessibilidade na web é um tema complexo;<label>s são um passo necessário, mas eles não são suficientes para garantir a acessibilidade ou a conformidade com os regulamentos do governo, onde ele se aplica.

Answer 4

Ronnie,

Se você quisesse colocar o rótulo de texto e a caixa de verificação dentro de um invólucro elemento, você pode fazer o seguinte:

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

Answer 5

Você pode quebrar a sua caixa de seleção 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>

Answer 6

Você precisa apenas enrole a caixa de seleção na etiqueta de marca, assim como esse

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

VIOLINO

ou você também pode usar o para atributo do rótulo e id de sua seleção, como abaixo

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

VIOLINO

Answer 7

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 não, pleae corrija-me!

Answer 8

Envolvimento com a etiqueta ainda não permite clicar em 'qualquer lugar na caixa' - ainda 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 muito de javascript que é efetivamente a alternância de duas vezes.