È possibile associare l'etichetta alla casella di controllo senza utilizzare "for = id"?

Question

So che è buono, a volte di associare un'etichetta con una casella di controllo:

<input id="something" type="checkbox" value="somevalue" /> 
<label for="something">this is label text</label> 

..ma posso ho ad utilizzare un ID per associare esso?
Il motivo principale che mi interessa è perché mi piace essere in grado di fare clic su un'etichetta per attivare il valore della casella di controllo, ma non mi piace l'idea di utilizzare un ID per qualcosa di così semplice.

Credo che avrei potuto utilizzare jQuery alternare l'elemento precedente (checkbox) di un'etichetta clic, ma forse c'è qualcosa di più semplice che mi manca. https://stackoverflow.com/a/2720771/923817 sembrava una soluzione, ma l'utente ha detto che non funziona in IE.

Answer 1

Sì, inserire l'input all'interno dell'etichetta.

<label><input type=checkbox name=chkbx1> Label here</label> 

Vedi implicit label association nelle specifiche HTML.

Answer 2

<label for="something">this is label text</label> 
<input id="something" type="checkbox" value="somevalue" /> 

in realtà l'attributo for è stato utilizzato per i lettori di schermo alle persone disabili, in modo da non è utile per l'accessibilità a scrivere, senza per l'attributo

Answer 3

Demo: JsFiddle

.c-custom-checkbox { 
 
    padding-left: 20px; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.c-custom-checkbox input[type=checkbox] { 
 
    position: absolute; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    clip: rect(0 0 0 0); 
 
    height: 15px; 
 
    width: 15px; 
 
    padding: 0; 
 
    border: 0; 
 
    left: 0; 
 
} 
 
.c-custom-checkbox .c-custom-checkbox__img { 
 
    display: inline; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 15px; 
 
    height: 15px; 
 
    background-image: none; 
 
    background-color: #fff; 
 
    color: #000; 
 
    border: 1px solid #333; 
 
    border-radius: 3px; 
 
    cursor: pointer; 
 
} 
 
.c-custom-checkbox input[type=checkbox]:checked + .c-custom-checkbox__img { 
 
    background-position: 0 0; 
 
    background-color: tomato; 
 
}

<label class="c-custom-checkbox"> 
 
    <input type="checkbox" id="valueCheck" /> 
 
    <i class="c-custom-checkbox__img"></i>Some Label 
 
</label>