1

Tratare de explicar un poco tengo unas especies de cartas creadas en html junto con unos checkbox e input.


    <div class="container-cards">
        <div class="cards">
            <div class="card-body">
                <div class="card-header">
                    <h3>Juan</h3>
                    <input class="btn-check checksAccounts" type="checkbox" name="id[]" value="1">
                </div>
                <p>Texto de la carta</p>
            </div>
            <div class="input-container">
                <input class="input-valor" type="text" name="valor[]" value="valor a recibir 1">
            </div>
        </div>
        <div class="cards">
            <div class="card-body">
                <div class="card-header">
                    <h3>Maria</h3>
                    <input class="btn-check checksAccounts" type="checkbox" name="id[]" value="2">
                </div>
                <p>Texto de la carta</p>
            </div>
            <div class="input-container">
                <input class="input-valor" type="text" name="valor[]" value="valor a recibir 2">
            </div>
        </div>
        <button class="obtener">Obtener</button>
    </div>

Lo que quisiera hacer es recibir el valor del input text cuando el chekbox de su correspondiente carta este marcado. Para ello eh estado probando con un poco de jquery

    <script>
        $(".obtener").on("click", function() {
            const arrayId = $('[name="id[]"]:checked')
                .map(function() {
                    return this.value;
                })
                .get();
            console.log(arrayId)
            //sacar valores
            var arrayValores = $(".input-valor input[type=text], .input-valor")
                .map(function() {
                    if ($(this).prev().prop('checked') == true) {
                        return $(this).val();
                    }
                })
                .get();
            console.log(arrayNombres)
            $.ajax({
                method: "POST",
                url: "test2.php",
                data: {
                    id: arrayId,
                    valores: arrayValores
                },
                cache: false,
                success: function(data) {
                    console.log(data);
                },
            });
        });
    </script>

Entiendo que con lo avanzado puedo encontrar el valor del input text cuando esta marcado y si el elemento input es hermano al checkbox. Pero como se podria hacer para capturar el valor del input text cuando el checkbox de su carta este marcada sin importar que este no sea elemento hijo o hermano.

0

1 respuesta 1

0

En este caso, a diferencia de la anterior respuesta, la solución pasa por modificar el HTML agregando un atributo data- en los inputs de tipo texto, que en esta respuesta he denominado data-chbxvalue (pero puede ser cualquier nombre que se te ocurra, preferentemente que empiece por data- para que se entienda mejor su significado).

Es decir, en el HTML tienes que modificar este tipo de líneas:

<input class="input-valor" type="text" name="valor[]" value="valor a recibir 1">

agregando el atributo data-chbxvalue= con el correspondiente valor que deseas relacionar:

<input class="input-valor" type="text" name="valor[]" value="valor a recibir 1" data-chbxvalue="1">

Luego, mediante el uso de $.inArray y de attr() consultamos si dicho valor de atributo se encuentra en el primer array para entonces rellenar o no el segundo con su valor.

O sea, quitas esto:

if ($(this).prev().prop('checked') == true) {

para poner esto:

if ($.inArray($(this).attr("data-chbxvalue"), arrayId) != -1) {

Ejemplo:

$(".obtener").on("click", function() {
  const arrayId = $('[name="id[]"]:checked')
    .map(function() {
      return this.value;
    })
    .get();
  console.log(arrayId)
  //sacar nombres
  var arrayNombres = $(".input-valor input[type=text], .input-valor")
    .map(function() {
      if ($.inArray($(this).attr("data-chbxvalue"), arrayId) != -1) {
        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>
<div class="container-cards">
  <div class="cards">
    <div class="card-body">
      <div class="card-header">
        <h3>Juan</h3>
        <input class="btn-check checksAccounts" type="checkbox" name="id[]" value="1">
      </div>
      <p>Texto de la carta</p>
    </div>
    <div class="input-container">
      <input class="input-valor" type="text" name="valor[]" value="valor a recibir 1" data-chbxvalue="1">
    </div>
  </div>
  <div class="cards">
    <div class="card-body">
      <div class="card-header">
        <h3>Maria</h3>
        <input class="btn-check checksAccounts" type="checkbox" name="id[]" value="2">
      </div>
      <p>Texto de la carta</p>
    </div>
    <div class="input-container">
      <input class="input-valor" type="text" name="valor[]" value="valor a recibir 2" data-chbxvalue="2">
    </div>
  </div>
  <button class="obtener">Obtener</button>
</div>

3
  • Muchas gracias :) ahora si podre continuar con este deber. Commented el 1 dic. 2022 a las 18:07
  • Vale, acabo de ampliar la explicación de la respuesta. Si que te queda alguna duda comenta, gracias.
    – masterguru
    Commented el 1 dic. 2022 a las 18:09
  • Recuerda marcar como aceptada esta respuesta para que la pregunta no quede pendiente eternamente también, gracias (a menos que surja una nueva más convincente, o si sale después siempre puedes cambiar tu aceptación sin problema).
    – masterguru
    Commented el 1 dic. 2022 a las 18:18

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.