Como fazer uma caixa de seleção alternar a partir de clicar sobre o texto do rótulo bem?
Pergunta
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?
Solução
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>
Outras dicas
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
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.
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>
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>
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>
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" />
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!
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.