You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何基于文本字符串使用JS/jQuery勾选HTML复选框

能否使用JS或jQuery基于文本字符串勾选复选框?

当然可以,以下是具体实现方式:

基于jQuery的实现

先确保页面已引入jQuery库,再通过筛选匹配目标文本对应的复选框,将其设置为选中状态:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="selectit"><input value="171" type="checkbox" name="post_category[]" id="in-category-171">Text 1</label>
<label class="selectit"><input value="172" type="checkbox" name="post_category[]" id="in-category-172">Text 2</label>
<label class="selectit"><input value="173" type="checkbox" name="post_category[]" id="in-category-173">Text 3</label>
$(':checkbox').filter(function() {
  // 读取复选框所在label的文本,去除首尾空格后匹配目标字符串
  return $(this).parent().text().trim() === 'Text 1';
}).prop('checked', true);

原生JavaScript实现(无需依赖jQuery)

如果不想引入jQuery,也可以用原生JS完成需求:

// 获取页面所有复选框元素
const checkboxes = document.querySelectorAll(':checkbox');
// 遍历筛选并设置选中状态
checkboxes.forEach(checkbox => {
  const labelText = checkbox.parentElement.textContent.trim();
  if (labelText === 'Text 1') {
    checkbox.checked = true;
  }
});

内容的提问来源于stack exchange,提问作者EnigmaOs

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.22 20:39:04