勾选Checkbox时无法获取邻近输入框值的jQuery问题求助

我来帮你排查下代码里的问题，你遇到的undefined主要是因为全局选择器和DOM定位错误导致的，下面是修正后的完整代码，以及详细的原因说明：

修正后的代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 第一组 -->
<input class="skaiciuoja" type="checkbox" id="skaiciuoja1" style="margin-bottom: 20px;">
<label for="skaiciuoja1">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>

<!-- 第二组 -->
<input class="skaiciuoja" type="checkbox" id="skaiciuoja2" style="margin-bottom: 20px;">
<label for="skaiciuoja2">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>

<script>
$(".skaiciuoja").change(function() {
  if (this.checked) {
    // 定位到当前checkbox对应的表格（关键：只操作当前组的元素）
    var $currentTable = $(this).nextAll('table').first();
    
    // 获取当前表格内的输入框值
    var a = $currentTable.find('.vaikai .A').val();
    var b = $currentTable.find('.vaikai .B').val();
    var c = $currentTable.find('.vaikai .C').val();
    var d = $currentTable.find('.vaikai .D').val();
    
    var atsakymas = a + b + c + d;
    // 将拼接值填入当前表格的barkodas输入框
    $currentTable.find('.barkodas').val(atsakymas);
  } else {
    // 可选：取消勾选时清空输入框
    $(this).nextAll('table').first().find('.barkodas').val('');
  }
});
</script>

原代码的核心问题分析 #

1. 全局选择器导致匹配错误元素
   你用$('.vaikai')会匹配页面上所有带vaikai类的行，而不是当前checkbox对应的表格里的行，这就会出现值混乱或者undefined的情况。

2. 未正确获取输入框的值
   原代码中a = $(this).closest('table').find('.A');只是获取了jQuery对象，没有调用.val()方法拿到输入框的实际值，所以console.log(a)会输出对象而非字符串。

3. DOM定位逻辑错误
   你的checkbox在表格外面，$(this).closest('table')找不到任何元素（因为closest是向上找父元素），所以后续的查找自然失败。

关于是否需要添加div优化查找 #

其实不需要强制添加div，但如果把每组checkbox和表格包裹在一个容器div里，查找逻辑会更直观且不易出错，比如：

<div class="group">
  <input class="skaiciuoja" type="checkbox" id="skaiciuoja1">
  <label for="skaiciuoja1">Generuoti</label>
  <br>
  <table>...</table>
</div>

此时定位表格可以改成：

var $currentTable = $(this).closest('.group').find('table');

这种结构更清晰，尤其是后续添加更多组的时候，维护成本更低。

内容的提问来源于stack exchange，提问作者Crypcode