Marque la casilla de verificación al hacer clic en la descripción

Question

Voy a crear una lista de casillas de verificación que serán compiladas por jQuery y JSON. La lista será una selección de grupos a los que se puede enviar un mensaje. Podría ser uno de más grupos. Esta parte puedo entender. El problema que tengo es cómo habilito la descripción para que cuando haga clic en la descripción, se seleccione la casilla de verificación.

<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

Utilice una etiqueta con for atributo (Asigné diferentes ID de casillas de verificación):

<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

Primero: que tienen un duplicado id allí. Un id debe ser único.

La forma más sencilla es utilizar la etiqueta label, por ejemplo .:

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

Ahora usted puede hacer clic en el texto y va a cambiar la casilla de verificación. Una alternativa es usar la función click de jQuery: http://www.google.com/#q=jquery+check+checkbox+on+click.

Answer 3

También se puede usar jQuery si no desea usuario una 'etiqueta'

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

Una solución diferente (sin usar el atributo "para") incluye cada campo <input /> dentro de las etiquetas <label></label>.

Ejemplo:

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

Esto podría una solución si usted tiene que mostrar las casillas de verificación con etiquetas como inline-block.