如何检查Bootstrap 4自定义复选框的状态？

我之前也踩过这个坑——Bootstrap 4的官方文档在自定义复选框这块确实太简略了，好多关键细节都没写明白，只能对着DOM结构自己抠。结合实际使用经验，给你梳理清楚：

一、正确的HTML结构（别漏了这些类） #

虽然你用检查器看的时候可能觉得没什么特殊类，但其实Bootstrap的自定义复选框是靠特定的嵌套结构和类来渲染的，正确写法应该是这样：

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="myCheckbox" value="my-custom-value">
  <label class="custom-control-label" for="myCheckbox">我是自定义复选框</label>
</div>

这里有几个关键点：

• 外层容器必须加custom-control custom-checkbox，这是Bootstrap识别自定义复选框的基础
• 原生<input>要加custom-control-input类，同时id要和<label>的for属性对应上，这样点击标签才能触发复选框
• 关于默认值"on"的问题：直接给<input>设置value属性就能替换掉原生的默认值，表单提交时就会发送你设置的这个值

二、修改复选框状态的方法 #

不管是初始化还是动态修改，核心都是操作原生的<input>元素，Bootstrap会自动同步自定义图标的状态，不用管其他元素：

1. HTML初始化选中状态 #

直接给<input>加checked属性就行：

<input type="checkbox" class="custom-control-input" id="myCheckbox" value="my-custom-value" checked>

2. JavaScript动态修改状态 #

用常规的DOM操作修改原生复选框的checked属性就可以，完全不用额外操作自定义图标：

// 选中复选框
document.getElementById('myCheckbox').checked = true;

// 取消选中
document.getElementById('myCheckbox').checked = false;

// 切换选中状态
const checkbox = document.getElementById('myCheckbox');
checkbox.checked = !checkbox.checked;

这样操作下来，自定义复选框的样式和功能就都正常了，再也不用纠结官方文档没写的细节啦～

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