使用jQuery获取复选框值并填入表格的问题求助

原代码存在的核心问题 #

• 选择器不匹配：JS里的imprimante、souris没有对应HTML里的复选框id，实际HTML里是printer、mouse；部分label的for属性和复选框id不匹配（比如screen的label对应id是screen_而非screen；Printer的label大小写和id不一致）。
• 逻辑错误：用else if导致只能处理第一个选中的复选框，复选框支持多选，应该用独立if判断；给<td>赋值用了.val()，这个方法只适用于表单元素，td需用.text()或.html()。
• 缺少触发时机：判断代码没有绑定到提交按钮的点击事件，提交时不会执行这段逻辑。
• 未处理取消选中的情况：选中后取消复选框，表格内容不会自动清空。

修正后的完整代码 #

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="screen_" value="Screen" />
  <label for="screen_">Screen</label>
</div>
<div>
  <input type="checkbox" id="garantie" value="Garantie" />
  <label for="garantie">Garantie</label><br>
</div>
<div>
  <input type="checkbox" id="printer" value="Printer" />
  <label for="printer">Printer</label><br>
</div>
<div>
  <input type="checkbox" id="mouse" value="Mouse" />
  <label for="mouse">Mouse</label><br><br>
</div>
<hr><br>
<input type="submit" class="btn_commander" value="Commander">

<table id="Display">
  <tr>
    <td>1</td>
    <td id="screen_display"></td>
    <td></td>
  </tr>
  <tr>
    <td>2</td>
    <td id="garantie_display"></td>
    <td></td>
  </tr>
  <tr>
    <td>3</td>
    <td id="printer_display"></td>
    <td></td>
  </tr>
  <tr>
    <td>4</td>
    <td id="mouse_display"></td>
    <td></td>
  </tr>
</table>

jQuery部分

$(document).ready(function() {
  $('.btn_commander').click(function(e) {
    e.preventDefault(); // 阻止默认提交行为，避免页面刷新
    
    // 处理Screen复选框
    if ($('#screen_').is(":checked")) {
      $('#screen_display').text($('#screen_').val());
    } else {
      $('#screen_display').text('');
    }
    
    // 处理Garantie复选框
    if ($('#garantie').is(":checked")) {
      $('#garantie_display').text($('#garantie').val());
    } else {
      $('#garantie_display').text('');
    }
    
    // 处理Printer复选框
    if ($('#printer').is(":checked")) {
      $('#printer_display').text($('#printer').val());
    } else {
      $('#printer_display').text('');
    }
    
    // 处理Mouse复选框
    if ($('#mouse').is(":checked")) {
      $('#mouse_display').text($('#mouse').val());
    } else {
      $('#mouse_display').text('');
    }
  });
});

额外优化建议 #

可以通过统一命名规则简化代码，避免重复判断：给所有复选框加共同类item-checkbox，然后循环处理：

$(document).ready(function() {
  $('.btn_commander').click(function(e) {
    e.preventDefault();
    $('.item-checkbox').each(function() {
      const checkboxId = $(this).attr('id');
      const displayTd = $('#' + checkboxId + '_display');
      displayTd.text($(this).is(':checked') ? $(this).val() : '');
    });
  });
});

对应的HTML里给每个复选框加上class="item-checkbox"即可，新增复选框时无需修改JS代码，扩展性更强。

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