Jquery при установленном флажке не удается найти ближайшие входные значения

Question

когда я устанавливаю флажок, мне нужно получить ближайшее значение ввода, но не повезло с добавлением моего кода. Пробовал несколько комбинаций большую часть времени undefined. Может ли кто-нибудь сказать мне, как правильно я могу получить эти значения? Может, мне нужно создать div, чтобы лучше находить эти элементы? Затем мне нужно нарезать эти значения и ввести ближайший ввод с classname = "barkodas".

$(".skaiciuoja").change(function() {
  if (this.checked) {
    var a = "";
    var b = "";
    var c = "";
    var d = "";
    a = $(this).closest('table').find('.A');
    b += $('.vaikai').closest(".B").find("input[name='b']").val();
    c += $('.vaikai').closest(".C").find("input[name='c']").val();
    d += $('.vaikai').closest(".D").find("input[name='d']").val();

    var atsakymas = a + b + c + d;


  }
  console.log(a);
  $(".barkodas").val(atsakymas);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="skaiciuoja" type="checkbox" style="margin-bottom: 20px;">
<label for="skaiciuoja">Generuoti</label>
<br>
<table border="1">
  <tr class="vaikai">
    <td><input class="A bar" name="a" type="text" value="AAAA"></td>
    <td><input class="B bar" name="b" type="text" value="BBBB"></td>
    <td><input class="C bar" name="c" type="text" value="CCCC"></td>
    <td><input class="D bar" name="d" type="text" value="DDDD"></td>
  </tr>
  <tr>
    <td colspan="4" style="background-color:yellow;height:50px;"></td>
  </tr>
  <tr>
    <td colspan="4"><input class="barkodas" type="text" placeholder="Barkodas"></td>
  </tr>
  </tr>
</table>
<br>
<br>
<br>
<br><br>
<br>
<input class="skaiciuoja" type="checkbox" style="margin-bottom: 20px;">
<label for="skaiciuoja">Generuoti</label>
<br>
<table border="1">
  <tr class="vaikai">
    <td><input class="A bar" name="a" type="text" value="1111"></td>
    <td><input class="B bar" name="b" type="text" value="2222"></td>
    <td><input class="C bar" name="c" type="text" value="3333"></td>
    <td><input class="D bar" name="d" type="text" value="4444"></td>
  </tr>
  <tr>
    <td colspan="4" style="background-color:yellow;height:50px;"></td>
  </tr>
  <tr>
    <td colspan="4"><input class="barkodas" type="text" placeholder="Barkodas"></td>
  </tr>
  </tr>
</table>

Answer 1

Вы можете добиться этого, выполнив поиск в соседней таблице и найдя входные данные. Затем объедините значения.

См. Этот пример:

$(".skaiciuoja").change(function() {
  // Find the frist table after this checkbox and get the inputs
  let input = $(this).nextAll("table:first").find("input.bar");
  
  // store display input to add/remove values
  let display = $(this).nextAll("table:first").find(".barkodas");

  if (this.checked) {
    let total = '';
    // Loop through inputs and concatenate the value
    input.each((i, e) => {
      total += e.value;
    });
    
    // Display and return so the rest of the code is not processed
    display.val(total);
    return;
  }
  // if not checked empty the input
  display.val("");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="skaiciuoja" type="checkbox" style="margin-bottom: 20px;">
<label for="skaiciuoja">Generuoti</label>
<br>
<table border="1">
  <tr class="vaikai">
    <td><input class="A bar" name="a" type="text" value="AAAA"></td>
    <td><input class="B bar" name="b" type="text" value="BBBB"></td>
    <td><input class="C bar" name="c" type="text" value="CCCC"></td>
    <td><input class="D bar" name="d" type="text" value="DDDD"></td>
  </tr>
  <tr>
    <td colspan="4" style="background-color:yellow;height:50px;"></td>
  </tr>
  <tr>
    <td colspan="4"><input class="barkodas" type="text" placeholder="Barkodas"></td>
  </tr>
</table>
<br>
<br>
<br>
<br><br>
<br>
<input class="skaiciuoja" type="checkbox" style="margin-bottom: 20px;">
<label for="skaiciuoja">Generuoti</label>
<br>
<table border="1">
  <tr class="vaikai">
    <td><input class="A bar" name="a" type="text" value="1111"></td>
    <td><input class="B bar" name="b" type="text" value="2222"></td>
    <td><input class="C bar" name="c" type="text" value="3333"></td>
    <td><input class="D bar" name="d" type="text" value="4444"></td>
  </tr>
  <tr>
    <td colspan="4" style="background-color:yellow;height:50px;"></td>
  </tr>
  <tr>
    <td colspan="4"><input class="barkodas" type="text" placeholder="Barkodas"></td>
  </tr>
</table>