如何通过输入值用JavaScript勾选对应Checkbox

原代码存在几个问题，直接修改如下：

修正后的JavaScript代码 #

$(document).ready(function() {
  // 监听输入框的键盘事件
  $(".customvalue").keyup(function(e) {
    // 只在按下回车键时触发逻辑
    if (e.keyCode === 13) {
      var inputVal = $(this).val().trim();
      // 清空所有已勾选项（可选，根据需求决定是否保留）
      $('.customcheckbox').prop('checked', false);
      // 定位到value匹配输入值的Checkbox并勾选
      $('.customcheckbox[value="' + inputVal + '"]').prop('checked', true);
      // 清空输入框（可选，提升操作体验）
      $(this).val('');
    }
  });
});

关键修改点 #

• 修正选择器：原代码$("customvalue")缺少类选择器前缀.，改为$(".customvalue")才能正确选中输入框
• 增加回车判断：只在按下回车键（keyCode=13）时执行勾选逻辑，避免每次按键都触发无效操作
• 精准匹配Checkbox：通过属性选择器[value="输入值"]定位到对应ID的Checkbox，实现指定勾选
• 可选优化：清空所有已勾选项确保每次只选中目标，同时清空输入框方便下一次操作

完整可运行代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-12">
      <div class="card-header">
        <h4 class="text-center">通过ID勾选复选框</h4>
        <div class="col-md-12">
          <div class="card-md-4">
            <div class="card-body">
              <input id="myTxt" type="text" value="" name="search" class="form-control  ml-auto m-2 customvalue" style="width: 25%;" placeholder="输入ID回车">

              <form action="delete.php" method="post">
                <table class="table table-bordered table-striped">
                  <thead>
                    <tr>
                      <th>
                        <button type="submit" name="stud_delete_multiple_btn" class="btn btn-danger" onclick="return confirm('确定要删除选中项吗？')">删除选中</button>
                      </th>
                      <th>ID</th>
                      <th>名字</th>
                      <th>姓氏</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td style="width: 10px;text-align:center">
                        <input type="checkbox" name="stud_id_1" class="customcheckbox" value="1">
                      </td>
                      <td>1</td>
                      <td>Susana</td>
                      <td>Daivid</td>
                    </tr>
                    <tr>
                      <td style="width: 10px;text-align:center">
                        <input type="checkbox" name="stud_id_1" class="customcheckbox" value="2">
                      </td>
                      <td>2</td>
                      <td>Sose</td>
                      <td>Nawsat</td>
                    </tr>
                    <tr>
                      <td style="width: 10px;text-align:center">
                        <input type="checkbox" name="stud_id_1" class="customcheckbox" value="3">
                      </td>
                      <td>3</td>
                      <td>Primso</td>
                      <td>Navid</td>
                    </tr>
                    <tr>
                      <td style="width: 10px;text-align:center">
                        <input type="checkbox" name="stud_id_1" class="customcheckbox" value="4">
                      </td>
                      <td>4</td>
                      <td>Lila</td>
                      <td>Noord</td>
                    </tr>
                  </tbody>
                </table>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
  $(".customvalue").keyup(function(e) {
    if (e.keyCode === 13) {
      var inputVal = $(this).val().trim();
      $('.customcheckbox').prop('checked', false);
      $('.customcheckbox[value="' + inputVal + '"]').prop('checked', true);
      $(this).val('');
    }
  });
});
</script>

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