web-dev-qa-db-ja.com

説明をクリックしたときにチェックボックスをオンにします

JQueryとJSONによって作成されるチェックボックスのリストを作成します。リストは、メッセージを送信できるグループの選択です。複数のグループの1つである可能性があります。この部分は理解できます。私が抱えている問題は、説明をクリックしてチェックボックスが選択されるように説明を有効にする方法です。

<div>
    <label for="group">
        Select lists
    </label>
</div>
<div>
    <input type="checkbox" name="group" id="group" value="1" title="Main List" />Main List
    <input type="checkbox" name="group" id="group" value="2" title="Secondary List" />Secondary List
</div>
htmlasp.net-mvccheckbox
41
Mike Wills

for属性を持つラベルを使用します（チェックボックスに異なるIDを割り当てました）：

<div>
    <label for="group">
        Select lists
    </label>
</div>
<div>
    <input type="checkbox" name="group" id="group1" value="1" title="Main List" />
    <label for="group1">Main List</label>
    <input type="checkbox" name="group" id="group2" value="2" title="Secondary List" />
    <label for="group2">Secondary List</label>
</div>
67
Chandu

別のソリューション（「for」属性を使用しない）は、<input />タグ内に各<label></label>フィールドを含めることです。

例：

<label><input type="checkbox" value="" /> Click Here to Check This</label>

これは、ラベルがinline-blockのチェックボックスを表示する必要がある場合の解決策です。

35
Janaka R Rajapaksha

最初：idが重複しています。 idは一意でなければなりません。

最も簡単な方法は、 label タグを使用することです。例：

<input type="checkbox" name="group" id="group_1" />
<label for="group_1">description</label>

これで、テキストをクリックすると、チェックボックスが切り替わります。別の方法は、jQueryのclick関数を使用することです： http://www.google.com/#q=jquery+check+checkbox+on+click 。

14
Alec

また、「ラベル」を使用したくない場合はjQueryを使用できます

 <input type="checkbox" name="SelectionCheckbox" id="SelectionCheckbox" />  
<div onclick="$('input[id $=SelectionCheckbox]').attr('checked', this.checked);"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
1
Greg
<label style="cursor:pointer" for="clickme">clickme</label><br>
<span><input id="clickme" type="checkbox"/>anand</span>
0
Shijo Rs