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.