Jak mohu udělat políčka přepnout z kliknutí na textovou jmenovku stejně?

hlasů
29

Checkboxesve HTMLformulářích nemají implicitní štítky s nimi. Přidání explicitní štítek (některé textu) vedle něj nebude přepínat checkbox.

Jak mohu udělat políčka přepnout z kliknutí na textovou jmenovku stejně?

Položena 05/08/2008 v 12:51
zdroj uživatelem
V jiných jazycích...                            


8 odpovědí

hlasů
43

Pokud jste správně označujete kódu HTML, není potřeba JavaScript. Následující kód umožní uživateli kliknout na text štítku zaškrtnout políčko.

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

Pro atribut na štítku prvku vazeb na id atribut na vstupní prvek a prohlížečem se postará o zbytek.

To bylo testování pro práci v:

  • IE6
  • IE7
  • Firefox
Odpovězeno 05/08/2008 v 13:00
zdroj uživatelem

hlasů
17

Nastavit CSS displayvlastnost pro označení, že blokovou prvek a používání, že místo vašeho div - Udržuje sémantický význam etikety a zároveň umožňuje bez ohledu na styl se vám líbí.

Například:

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

Odpovězeno 05/08/2008 v 13:52
zdroj uživatelem

hlasů
3

Jak je uvedeno v @Gatekiller a jiní, správné řešení je <label> tag.

Click-in-the-textu je pěkná, ale tam je další důvod, proč používat <label> značka: přístupnost. Nástroje, které zrakově postižení lidé používají k přístupu na internet potřebujete <label> to číst-out význam políček a přepínačů. Bez <label> s, musí se odhadnout na základě okolního textu, a často si to špatně, nebo se vzdát.

Je to velmi frustrující, aby se potýkají s formou, který čte „Prosím vyberte způsob dopravy, radio-button1, radio-tlačítko2, radio-Button3“.

Všimněte si, že web přístupnost je komplexní téma; <label> s jsou nezbytným krokem, ale nejsou dostatečné pro zajištění dostupnosti nebo shodu s vládními nařízeními, kde se tato směrnice vztahuje.

Odpovězeno 25/08/2008 v 16:21
zdroj uživatelem

hlasů
2

Ronnie,

Pokud byste chtěli přiložit text štítku a políčko uvnitř obálky prvku, můžete provést následující kroky:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Odpovězeno 05/08/2008 v 13:28
zdroj uživatelem

hlasů
1

Můžete zabalit políčko na energetickém štítku:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Odpovězeno 05/08/2008 v 13:25
zdroj uživatelem

hlasů
0

Musíte prostě zabalit políčka ve štítku značku, stejně jako to

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

HOUSLE

nebo můžete také použít pro atribut štítku a id vašeho políčka, jako je níže

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

HOUSLE

Odpovězeno 01/09/2015 v 12:10
zdroj uživatelem

hlasů
-1

To by mělo fungovat:

<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>

pokud to doesnt, pleae korektní mě!

Odpovězeno 09/03/2015 v 12:13
zdroj uživatelem

hlasů
-2

Zabalení s označením stále neumožňuje kliknutím na ‚kdekoli v poli‘ - stále jen na text! To dělá práci za mě:

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

ale bohužel má spoustu JavaScriptu, který je účinně přepínání dvakrát.

Odpovězeno 05/08/2008 v 13:34
zdroj uživatelem

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