W jaki sposób mogę dokonać Przełącz pole wyboru z kliknięciu na etykiecie tekstowej, jak również?

głosy
29

Checkboxesw HTMLformach nie mają ukrytych etykiety z nimi. Dodanie wyraźnego etykietę (jakiś tekst) obok niego nie przełączać checkbox.

W jaki sposób mogę dokonać Przełącz pole wyboru z kliknięciu na etykiecie tekstowej, jak również?

Utwórz 05/08/2008 o 12:51
źródło użytkownik
W innych językach...                            


8 odpowiedzi

głosy
43

Jeśli prawidłowo oznaczyć swój kod HTML, nie ma potrzeby javascript. Poniższy kod pozwoli użytkownikowi kliknij napisu zaznaczyć pole wyboru.

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

Dla atrybutu powiązań elementów etykiety do id atrybut elementu wejściowego i przeglądarki zrobi resztę.

Zostało badania do pracy w:

  • IE6
  • IE7
  • Firefox
Odpowiedział 05/08/2008 o 13:00
źródło użytkownik

głosy
17

Ustaw CSS displaynieruchomości na etykiecie jako element blokowy i używać zamiast swojego div - Utrzymuje znaczenie semantyczne etykiety pozwalając cokolwiek stylizacji chcesz.

Na przykład:

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

Odpowiedział 05/08/2008 o 13:52
źródło użytkownik

głosy
3

Jak wskazano @Gatekiller i innych, odpowiednim rozwiązaniem jest <etykieta> tag.

Click-in-the-tekst jest ładny, ale jest jeszcze jeden powód, aby użyć <label> Tag: dostępność. Narzędzia, że ​​osoby korzystające z upośledzeniem wzroku dostęp do internetu potrzebne <label> s do odczytu na znaczenie wyboru i przycisków radiowych. Bez <label> S, muszą odgadnąć na podstawie otaczający tekst, a często się to źle albo trzeba zrezygnować.

Jest to bardzo frustrujące do czynienia z formularza, który brzmi „Wybierz metodę wysyłki radiowej button1 radiowej Button2 radiowej button3”.

Należy pamiętać, że dostępność stron internetowych jest złożonym tematem; <label> s są niezbędnym krokiem, ale nie są wystarczające, aby zagwarantować dostępność lub zgodność z regulacjami rządowymi w których ma zastosowanie.

Odpowiedział 25/08/2008 o 16:21
źródło użytkownik

głosy
2

Ronnie,

Jeśli chcesz dołączyć tekst etykiety i wyboru wewnątrz elementu otoki, można wykonać następujące czynności:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Odpowiedział 05/08/2008 o 13:28
źródło użytkownik

głosy
1

Można owinąć wyboru w etykiecie:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Odpowiedział 05/08/2008 o 13:25
źródło użytkownik

głosy
0

Trzeba po prostu zawinąć w pole Etykieta, tak jak to

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

SKRZYPCE

lub można również użyć do atrybutu label i id swojego wyboru jak poniżej

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

SKRZYPCE

Odpowiedział 01/09/2015 o 12:10
źródło użytkownik

głosy
-1

to powinno działać:

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

jeśli to robi, pleae corect mnie!

Odpowiedział 09/03/2015 o 12:13
źródło użytkownik

głosy
-2

Owijanie z etykietą nadal nie pozwala kliknięciu „gdziekolwiek w polu” - jeszcze tylko na tekst! To nie praca dla mnie:

<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 niestety ma wiele JavaScript, który jest skutecznie przełączając dwukrotnie.

Odpowiedział 05/08/2008 o 13:34
źródło użytkownik

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