Установите флажок при нажатии на описание

Question

Я буду создавать список флажков, которые будут созданы jQuery и JSON.В списке будут представлены группы, в которые можно отправить сообщение.Это может быть одна из нескольких групп.Эту часть я могу понять.Проблема, с которой я столкнулся, заключается в том, как включить описание, чтобы при нажатии на описание был установлен флажок.

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

Answer 1

Использовать метку с атрибутом for (я назначил разные идентификаторы для флажков):

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

Answer 2

Другое решение (без использования атрибута "for") включает каждое поле <input /> внутри тегов <label></label>.

Пример:

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

Это может быть решением, если вы должны отобразить флажки с метками inline-block.

Answer 3

Первое: у вас есть дубликат id.id должен быть уникальным.

Самый простой способ - использовать тег label , например:

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

Теперь вы можете нажать на текст, и онпереключу флажок.Альтернативой является использование функции click в jQuery: http://www.google.com/#q=jquery+check+checkbox+on+click.

Answer 4

Также вы можете использовать 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>

Answer 5

<label style="cursor:pointer" for="clickme">clickme</label><br>
<span><input id="clickme" type="checkbox"/>anand</span>