Перезапись значений в value checkbox'a через input
Eсть фрагмент кода, есть n'e количество строк из таблицы которые подтягиваются из БД, каждая строки имеет уникальную информацию и name в checkbox'e (Нужно для дальнейшей обработки). Сейчас получается так, изменение intup первой строки переписывает value всех checkbox. Нужно при внесении значения в input,это значение переносилось в value checkbox'a в строке которого вносилось изменение.
Нужно отслеживать input в строке из цикла, и если он изменен вносить изменение этого input в value checkbox'a?
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody class="table-hover">
<?php foreach ($stock as $key => $part) : ?>
<tr>
<th scope="row"><?= $key + 1 ?></th>
<td><?= $part['name'] ?></td>
<td><?= $part['quantity'] ?></td>
<td>
<div class="form-check form-check-inline">
<input name="stock<?= $part['id'] ?>" class="check form-check-input" type="checkbox" id="inlineCheckbox2<?= $part['id'] ?>" value="option2">
<label class="form-check-label" for="inlineCheckbox2<?= $part['id'] ?>">
<input id="valCheck" type="number">
</label>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
$('#valCheck').on('input keyup', function(e) {
var value = this.value;
$(".check").attr("value", value);
});
</script>
Ответы (2 шт):
Попробуйте так:
$('#valCheck').on('input keyup', function(e) {
var value = this.value;
$(this).closest('.form-check').find('.check').val(value);
});
С помощью $(this).closest('.form-check')
можно подняться наверх по DOM-у от инпута и затем уже провалиться вниз до чекбокса через .find('.check')
Просто сейчас у Вас понятно, что $('.check')
будет перезаписывать все чекбоксы, найденные на странице, а $(this)
обычно помогает внутри обработчиков событий получать ссылку на себя и уже от него дальше ходить по дереву
Работает! Спасибо за наводку !
$('input[type="number"]').on('input keyup', function(e) {
var value = this.value;
$(this).closest('.form-check').find('.check').val(value);
});