"for = id"を使用せずにラベルをチェックボックスに関連付けることはできますか？</p> <pre><code><input id="something" type="checkbox" value="somevalue" /> <label for="something">this is label text</label> </code></pre> <p>..but私はそれを関連付けるためのIDを使用する</em>を持って<em>ん：

Question

は、私はそれがチェックボックスでラベルを関連付けることが時々良好であることを知っていますか？
私が気にする主な理由は、ラベルをクリックしてチェックボックスの値を切り替えるのが好きだからですが、idをとても単純なものに使う考えが嫌いです。

jQueryを使用して、クリックされたラベルの前の要素（チェックボックス）を切り替えることができたと思いますが、もっと簡単なものがあります。 https://stackoverflow.com/a/2720771/923817は解決策のように見えましたが、ユーザーはIEで動作しないと言いました。

Answer 1

はい、ラベルの内側に入力します。

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

HTMLの仕様にimplicit label associationを参照してください。アクセシビリティ属性にせずに書くことのために、実際の属性について、障害者へのスクリーンリーダーのためそれほど有用ではない使用された

Answer 2

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

Answer 3

デモ：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>