1

Entonces tengo una lista de inputs y checkboxes, quisiera saber si existe forma de recibir el valor que tengo en el <input type="text"> pero solo si el checkbox esta marcado. Hasta ahora tengo esto en el html

    <input type="checkbox" class="btn-check checksAccounts" id="checks" name="idTxt[]" value="1">
    <input class="input-nombres" type="text" value="Juan">
    <input type="checkbox" class="btn-check checksAccounts" id="checks" name="idTxt[]" value="2">
    <input class="input-nombres" type="text" value="Maria">
    <input type="checkbox" class="btn-check checksAccounts" id="checks" name="idTxt[]" value="3">
    <input class="input-nombres" type="text" value="Pedro">
    <input type="checkbox" class="btn-check checksAccounts" id="checks" name="idTxt[]" value="4">
    <input class="input-nombres" type="text" value="Carlos">
    <button class="obtener">Obtener</button>

y en ajax-jquery

   $(".obtener").on("click", function() {
            const arrayId = $('[name="idTxt[]"]:checked')
                .map(function() {
                    return this.value;
                })
                .get();
            //sacar nombres
            var arrayNombres = $(".input-nombres input[type=text], .input-nombres")
                .map(function() {
                    return this.value;
                })
                .get();
            //ejecutar ajax
            $.ajax({
                method: "POST",
                url: "test2.php",
                data: {
                    id: arrayId,
                    nombres: arrayNombres
                },
                cache: false,
                success: function(data) {
                    console.log(data);
                },
            });
        });

El comportamiento esperado es que si por ejemplo marco la primera y segunda casila reciba valor check box es: 2,3 valor input text es: Maria,Pedro Pero lo que recibo es valor check box es: 2,3 valor input text es: Juan,Maria Es decir que solo los checkbox se recorren y obtengo el valor que deberia, mientas que no importa que haga en los inputs text recibo siempre recibo el primer valor. No entiendo realmente como podria obtener el value del input text solo si este esta marcado con un checkbox.

1 respuesta 1

1

No tienes a ambos inputs relacionados de ninguna forma, solo por la posición, por lo tanto, jugando con eso, puedes hacer lo siguiente, cambiando esto:

//sacar nombres
var arrayNombres = $(".input-nombres input[type=text], .input-nombres")
  .map(function() {
    return this.value;
  })
  .get();

por lo siguiente, donde en cada elemento input del tipo text nos posicionamos en su elemento anterior y consultamos si está marcado gracias a los métodos prev() y prop(), para finalmente devolver su valor con val() (con this.value también funciona, pero hemos de evitar mezclar funciones de javascript vanilla con métodos de jquery, si existen, por coherencia):

//sacar nombres
var arrayNombres = $(".input-nombres input[type=text], .input-nombres")
  .map(function() {
    if ($(this).prev().prop('checked') == true) {
      return $(this).val();
    }
  })
  .get();

Ejemplo completo funcional:

$(".obtener").on("click", function() {
  const arrayId = $('[name="idTxt[]"]:checked')
    .map(function() {
      return this.value;
    })
    .get();
  console.log(arrayId)
  //sacar nombres
  var arrayNombres = $(".input-nombres input[type=text], .input-nombres")
    .map(function() {
      if ($(this).prev().prop('checked') == true) {
        return $(this).val();
      }
    })
    .get();
  console.log(arrayNombres)
  //ejecutar ajax
  $.ajax({
    method: "POST",
    url: "test2.php",
    data: {
      id: arrayId,
      nombres: arrayNombres
    },
    cache: false,
    success: function(data) {
      console.log(data);
    },
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="btn-check checksAccounts" name="idTxt[]" value="1">
<input class="input-nombres" type="text" value="Juan">
<input type="checkbox" class="btn-check checksAccounts" name="idTxt[]" value="2">
<input class="input-nombres" type="text" value="Maria">
<input type="checkbox" class="btn-check checksAccounts" name="idTxt[]" value="3">
<input class="input-nombres" type="text" value="Pedro">
<input type="checkbox" class="btn-check checksAccounts" name="idTxt[]" value="4">
<input class="input-nombres" type="text" value="Carlos">
<button class="obtener">Obtener</button>

7
  • Gracias entiendo que funciona si el checkbox y el input text estan cerca, pero y si el check box se encuentra digamos unos 3 niveles por encima digamos que el input check se encuentra en un div padre mientras que el input text se encuentra en un div de otro div un div nieto. Como podria encontrar ese valor ya que lo estoy intentando y solo me tira un array vacio. Commented el 1 dic. 2022 a las 16:55
  • Fíjate que en mi pregunta digo No tienes a ambos inputs relacionados de ninguna forma, solo por la posición y mi respuesta es exactamente para la pregunta actual, no esta nueva que estas haciendo. Si lo hubiera sabido te hubiera respondido de otra forma, y no usando métodos de posicionamiento de jquery, sinó más bien atributos data-. Si quieres una respuesta amplia y concreta haz la pregunta y te lo explico, pero no cambies la pregunta actual porque entonces no se entenderá ni la pregunta ni esta respuesta.
    – masterguru
    Commented el 1 dic. 2022 a las 17:29
  • Entiendo gracias. Así lo hare Commented el 1 dic. 2022 a las 17:34
  • No cambiará tanto la respuesta, será muy parecida, eso sí, pero atendiendo a tu enunciado inicial esta respuesta es la más correcta sin modificar el HTML. Fíjate que tu pregunta era acerca de la posición previa solamente: ¿Como recibir valores de un input text solo si esta marcado previamente con un checkbox? Es por eso que te pido una nueva pregunta, para diferenciar los casos y que no tengas que modificar esta.
    – masterguru
    Commented el 1 dic. 2022 a las 17:38
  • Si y me ah quedado clara la duda inicial así que voy a subir la nueva duda muchas gracias. Commented el 1 dic. 2022 a las 17:39

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.