1

lo que sucede es que necesito que cada que ejecute el click, me capture el valor del padre que acabo de seleccionar, pero cada que ejecuto el click, me captura todos los valores de los input seleccionados y no solo al que le acabo de dar click, no logro que funcione como quiero

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
  
  
  <div class="padre">
    <div class="hijo">
      <label >
        <input type="checkbox">
        Test 1
      </label>
    </div>
    <div class="hijo">
      <label >
        <input type="checkbox">
        Test 2
      </label>
    </div>
    <div class="hijo">
      <label >
        <input type="checkbox">
        Test 3
      </label>
    </div>
    <div class="hijo">
      <label >
        <input type="checkbox">
        Test 4
      </label>
    </div>
    <div class="hijo">
      <label >
        <input type="checkbox">
        Test 5
      </label>
    </div>
  </div>
  <div class="active">
    
  </div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript">
    $('input').click(function() {
      $('input:checked').each(function(){
        if($(this).is(':checked')){
          console.log ($(this).parent('label').text());
       }
      });
    });
  </script>
</body>
</html>

2
  • Dándole una leída rápida, puedes asignarles ID's a cada item porque todos comparten el mismo type.
    – user123397
    Commented el 5 abr. 2019 a las 21:31
  • tu problema es que recorres, como tu lo dices, todos los elementos cuando haces click. Tendrías que detectar el evento change y no click en el check box y solo chequear el estado de ese ítem y no de todos. El each ese no creo que sea útil. Saludos. Commented el 5 abr. 2019 a las 21:48

1 respuesta 1

2

Si solo quieres seleccionar el texto del label padre actual, entonces no debes de implementar el each porque este recorrera todo input que esten checked. Tambien cambie el evento click por change que es lo que comunmente se utiliza para campos checkbox. Si necesitas el click solo reemplaza el nombre del evento.

Te dejo un ejemplo:

$('input').change(function() {
  if($(this).is(':checked')){
    console.log ($(this).parent('label').text());
 }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  
<div class="padre">
  <div class="hijo">
    <label >
      <input type="checkbox">
      Test 1
    </label>
  </div>
  <div class="hijo">
    <label >
      <input type="checkbox">
      Test 2
    </label>
  </div>
  <div class="hijo">
    <label >
      <input type="checkbox">
      Test 3
    </label>
  </div>
  <div class="hijo">
    <label >
      <input type="checkbox">
      Test 4
    </label>
  </div>
  <div class="hijo">
    <label >
      <input type="checkbox">
      Test 5
    </label>
  </div>
</div>

<div class="active">
</div>

Te dejo unos enlaces de documentacion para que los revises.

.change(): El evento change se envía a un elemento cuando cambia su valor. Este evento está limitado a elementos <input>, cuadros de texto <textarea> y elementos de seleccion <select>. Para las casillas de selección, casillas de verificación y botones de radio, el evento se activa inmediatamente cuando el usuario hace una selección con el mouse, pero para los otros tipos de elementos, el evento se aplaza hasta que el elemento pierde el foco.

.each(): función de iterador genérico, que se puede utilizar para iterar sin problemas sobre objetos y matrices.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.