基于值隐藏Checkbox的jQuery实现问题：无法隐藏指定选项

我尝试隐藏值为Blank和Contacts的复选框（包括它们的标签），用了下面的jQuery代码但完全没效果：

$('#relatedto input').val('Blank').hide(); 
$('#relatedto input').val('Contacts').hide();

我的HTML结构是这样的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id='relatedto'> 
  <label for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads">Leads</label> 
  <label for="ms-opt-1"><input type="checkbox" title="Contacts" id="ms-opt-1" value="Contacts">Contacts</label> 
  <label for="ms-opt-1"><input type="checkbox" title="Blank" id="ms-opt-1" value="Blank">Blank</label> 
</div>

问题出在哪？ #

你原来的代码逻辑有两个关键错误：

• $('#relatedto input').val('Blank') 不是选择值为Blank的input，而是把所有#relatedto下的input的值设置为Blank，这完全偏离了你的需求。
• 就算你选对了input，只隐藏input本身的话，它外面的标签文字还是会显示，所以得连同父级的label一起隐藏。

另外还有个小问题：你的HTML里所有input的id都是ms-opt-1，HTML规范要求id必须唯一，这会导致点击标签时可能出现交互异常，后面我会给出修正后的HTML。

正确的解决方案 #

用属性选择器选中对应值的input，然后找到它的父级label一起隐藏：

方案1：分开隐藏（逻辑更清晰）

// 确保DOM加载完成后再执行代码
$(document).ready(function() {
  // 隐藏值为Contacts的复选框及其标签
  $('#relatedto input[value="Contacts"]').closest('label').hide();
  // 隐藏值为Blank的复选框及其标签
  $('#relatedto input[value="Blank"]').closest('label').hide();
});

方案2：合并选择器（代码更简洁）

$(document).ready(function() {
  $('#relatedto input[value="Contacts"], #relatedto input[value="Blank"]')
    .closest('label')
    .hide();
});

修正后的规范HTML

把每个input的id改成唯一值，对应label的for属性也要匹配：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id='relatedto'> 
  <label for="ms-opt-1"><input type="checkbox" title="Leads" id="ms-opt-1" value="Leads">Leads</label> 
  <label for="ms-opt-2"><input type="checkbox" title="Contacts" id="ms-opt-2" value="Contacts">Contacts</label> 
  <label for="ms-opt-3"><input type="checkbox" title="Blank" id="ms-opt-3" value="Blank">Blank</label> 
</div>

代码解释 #

• input[value="Contacts"]：精准匹配value属性为Contacts的input元素
• .closest('label')：找到当前input最近的父级label元素（因为你的input嵌套在label里）
• .hide()：隐藏整个label容器，这样就把复选框和它的文字标签一起隐藏了

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