Nasıl Metnin yanı etiketinde tıklayarak bir onay kutusu geçiş düğmesini yapabilirim?

oy
29

Checkboxesiçinde HTMLformlar örtülü olmayan etiketleri onlarla. Yanında açık bir etiket (bazı metin) ekleme geçiş vermez checkbox.

Nasıl Metnin yanı etiketinde tıklayarak bir onay kutusu geçiş düğmesini yapabilirim?

Oluştur 05/08/2008 saat 12:51
kaynak kullanıcı
Diğer dillerde...                            


8 cevaplar

oy
43

doğru bir şekilde HTML kodu biçimlendirme ise javascript gerek yoktur. Aşağıdaki kod kullanıcı onay kutusunu işaretlemek için etiket yazısını tıklayın sağlayacaktır.

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

Için etiket eleman linklere öznitelik kimliği giriş öğesinin üzerine özniteliği ve tarayıcı rest.

Bu çalışmayı test edilmiştir:

  • IE6
  • IE7
  • Firefox
Cevap 05/08/2008 saat 13:00
kaynak kullanıcı

oy
17

CSS ayarlayın displayo ne gibi stil izin verirken bir etiketin semantik anlam tutar - yerine div bir blok elemanı ve kullanımını olmaya etiket için özellik.

Örneğin:

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

Cevap 05/08/2008 saat 13:52
kaynak kullanıcı

oy
3

@Gatekiller ve başkaları tarafından belirtildiği gibi, doğru çözüm <label> etikettir.

Click-in-the-metin güzel, ama <label> etiketini kullanmak için başka bir neden yoktur: erişilebilirliği. görme engelli insan web'e erişmek için kullandığınız araçlar <label> okuma-out Onay kutuları ve radyo düğmeleri anlamını s gerekir. <Label> s olmadan, onlar metin çevreleyen dayalı tahmin zorunda ve sık sık yanlış olsun veya vazgeçmek zorunda.

Okuyan bir form ile karşı karşıya olması çok sinir bozucu "seçiniz gönderi yöntemi, radyo-Button1, radyo-düğmesini2, radyo-Button3".

o web erişilebilirlik karmaşık bir konudur unutmayın; <Label> lar gerekli bir adım vardır ama onlar uygular yasal mevzuata erişilebilirlik veya uygunluğu garanti etmek için yeterli değildir.

Cevap 25/08/2008 saat 16:21
kaynak kullanıcı

oy
2

Ronnie,

Eğer bir sarıcı eleman içindeki etiket metin ve onay içine istiyorsa, aşağıdaki yapabilirsiniz:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Cevap 05/08/2008 saat 13:28
kaynak kullanıcı

oy
1

Etikette onay kutusunu sarabilirsiniz:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Cevap 05/08/2008 saat 13:25
kaynak kullanıcı

oy
0

Sadece sadece bu gibi etiket etiketi onay kutusunu sarmak gerekiyor

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

KEMAN

ya da kullanabilirsiniz için etiketin öznitelik ve id aşağıda gibi onay kutusu

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

KEMAN

Cevap 01/09/2015 saat 12:10
kaynak kullanıcı

oy
-1

bu çalışmalı:

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

doesnt Pleae beni corect!

Cevap 09/03/2015 saat 12:13
kaynak kullanıcı

oy
-2

Hala sadece metin üzerinde - etiketle tamamlayan hala 'her yerde kutusuna' tıklayarak izin vermez! Bu benim için işi yapar:

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

ama ne yazık ki etkili bir iki kez geçmek olduğunu javascript bir sürü vardır.

Cevap 05/08/2008 saat 13:34
kaynak kullanıcı

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