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

Я создам список флажков, которые будут созданы 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>

Ответ 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>

Ответ 2

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

Пример:

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

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

Ответ 3

Во-первых: у вас есть дубликат 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.

Ответ 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>