casilla de verificación marcada al hacer clic en la etiqueta asociada

Question

Tengo checkbox y la descripción de la casilla de verificación en label. Quiero check Casilla de verificación cuando se hace clic en la etiqueta.
marcado:

<input id="Checkbox1" type="checkbox" /></div> 
<label id="lblAssociateWithCheckBox" title="Check"></label> 

En jQuery Trato:

$(document).ready(function() { 
      CheckCheckBox($('lblAssociateWithCheckBox'), $('Checkbox1')); 
      function CheckCheckBox(lblID, chkID) { 
       $('#' + lblID).live("click", function() { 
        return $('#' + Checkbox1).attr('checked', 'checked'); 
       }); 
      } 
     }); 

pero no es work.I tiene un error en firebug.

uncaught exception: Syntax error, unrecognized expression: #[object Object]

¿Cuál es mi error? Si esta no es una forma adecuada de hacerlo, sugiérele una forma alternativa. Gracias.

Answer 1

Actualización: Acabo de ver su comentario en la respuesta de Pavan sobre el deseo de utilizar elementos que no sean de etiqueta como etiquetas, por ejemplo, elementos de tramo. Mi primera respuesta es ¿por qué? Pero si realmente lo desea, puede hacerlo fácilmente sin tener que escribir muchos códigos y códigos de identificación de elementos en su JavaScript (que parece ser la ruta en la que se encuentra actualmente con su código actual).

Utilice un atributo data en el elemento que desea utilizar como etiqueta de pseudo, de la siguiente manera:

<span data-labelfor="name">Name</span> 
<input type="checkbox" id="name"> 

y luego se puede configurar el controlador de clic con un poco de jQuery genérica para seleccionar todos los elementos con ese atributo :

$(document).ready(function() { 

    $("[data-labelfor]").click(function() { 
     $('#' + $(this).attr("data-labelfor")).prop('checked', 
          function(i, oldVal) { return !oldVal; }); 
    }); 

}); 

demostración de trabajo que muestra que una función corta aplicar el comportamiento de un lapso de una etiqueta y un div: http://jsfiddle.net/TFD72/

Respuesta original:

Como ya se ha explicado Pavan, usted puede hacer esto de forma automática mediante el atributo for en su etiqueta, pero en cuanto a por qué su código no funcionó:

Su llamada a la CheckCheckBox() función se pasa dos objetos jQuery como parámetros de la siguiente manera:

CheckCheckBox($('lblAssociateWithCheckBox'), $('Checkbox1')); 

Pero la función es tratar a esos parámetros, como si fueran cadenas que sostienen los identificadores de los elementos que desea procesar.Así que si desea mantener su función que es simplemente cambiar la forma de la llama para pasar el tipo adecuado de parámetro:

CheckCheckBox('lblAssociateWithCheckBox', 'Checkbox1'); 

Eso se debe corregir el error que usted cita.

Sin embargo, su función como es configurará la casilla de verificación "marcada" en cada clic de la etiqueta, incluso si ya estaba marcada. Si usted quiere que alternar entre (es decir, un comportamiento normal) marcado y sin marcar se puede hacer algo como esto:

$('#' + Checkbox1).prop('checked', function(i, oldVal) { return !oldVal; }); 

(. Pero, de nuevo, sólo lo hacen en el formato HTML mediante el atributo for)

Answer 2

No necesita escribir el código de JQuery. Puedes hacer esto con HTML.

Cambiar su html de la siguiente manera

<input id="Checkbox1" type="checkbox" /> 
<label for="Checkbox1" title="Check">Check ME</label> 

aquí es el jsFiddle. http://jsfiddle.net/sjG4w/

Answer 3

Usted puede hacer esto mediante

<label id="lblAssociateWithCheckBox" title="Check" OnClick="JavaScript:ClickedLabel('Check1')" ></label> 

En ClickedLabel se puede encontrar el elemento pasado y si se comprueba do desactive y si no se controla qué comprobarlo.

Answer 4

si siempre usa label y checkbox entonces usuario for atributo de label y id de casilla de verificación como mismo. por ejemplo:

<label for="name">Name</label> 
<input type="checkbox" id="name"> 

o de lo contrario

 CheckCheckBox($('#lblAssociateWithCheckBox'), $(#'Checkbox1')); 
     function CheckCheckBox(lblID, chkID) { 
      lblID.live("click", function() { 
       return $(this).closest(chkID).attr('checked', true); 
      }); 
     } 

Answer 5

Hay dos maneras de hacer esto sin ningún javascript en absoluto. Pavan explicó la primera forma, que es usar el atributo (coincide con el ID casilla de verificación):

<input id="Checkbox1" type="checkbox" /> 
<label for="Checkbox1" title="Check">Check ME</label> 

La otra forma, que yo prefiero es envolver la casilla de verificación dentro de una etiqueta etiqueta:

<label><input type="checkbox" id="Checkbox1"> Text</label> 

Aquí está el jsfiddle para ambos: http://jsfiddle.net/m4rK5/