本文讲解如何使用 jquery 实现复选框（checkbox）与 select 下拉框的双向绑定：当 select 选中 “yes” 或 “maybe” 时自动勾选复选框；当复选框被取消勾选时，select 自动重置为 `value="null"` 的空白选项，且不破坏原有选项文本。
在表单交互开发中，常需让多个控件保持状态一致。本例中，<select> 与 <input type="checkbox"> 需要双向联动：
- ✅ 当用户从下拉框中选择 “Yes” 或 “Maybe” → 复选框自动勾选；
- ✅ 当用户选择 “No” 或空白项（value="null"）→ 复选框自动取消勾选；
- ✅ 当用户手动取消勾选复选框 → 下拉框应精准回退至 value="null" 的选项（即清空选择），而非误改选项文本或破坏 DOM 结构。
⚠️ 原代码中的核心问题在于误用了 .prop() 和 .text() 方法：
- $("#test-1").prop("null") 是无效写法（试图读取名为 "null" 的属性，无实际作用）；
- $("#test-1 option:selected").text("") 会清空当前选中项的显示文本（如把 <option value="Yes">Yes</option> 变成 <option value="Yes"></option>），导致后续无法正常显示；
- 使用 .blur() 监听 select 也不够健壮——用户可通过键盘操作切换选项而不会触发 blur，推荐统一使用 change 事件。
✅ 正确做法是：仅操作 value 和 selected 属性，绝不修改 <option> 的文本内容。以下是优化后的完整实现：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<div>Test 1:
<select id="select">
<option selected value="null"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Maybe">Maybe</option>
</select>
</div>
<div><br>Test 2:
<input id="checkbox" type="checkbox">
</div>
</div>$(function() {
const $select = $('#select');
const $checkbox = $('#checkbox');
// select 变化时：同步 checkbox 状态
$select.on('change', function() {
const val = $select.val();
$checkbox.prop('checked', ['Yes', 'Maybe'].includes(val));
});
// checkbox 变化时：仅当取消勾选，才重置 select 到 null 项
$checkbox.on('change', function() {
if (!$(this).is(':checked')) {
$select.find('option[value="null"]').prop('selected', true);
}
});
});? 关键要点总结：
- 使用 .on('change') 替代 .blur() 或 .click()，确保兼容鼠标、键盘（方向键+Enter）等所有选择方式；
- 判断逻辑用 ['Yes','Maybe'].includes(val) 更简洁可维护；
- 重置 select 时，通过 [value="null"] 定位并设置 selected 属性，而非修改 .text() 或误调 .prop("null")；
- 所有操作均基于 value 属性驱动，完全保留原始 <option> 的 innerText，杜绝文本丢失问题；
- 单一 $(function(){...}) 包裹初始化逻辑，避免重复绑定。
此方案轻量、健壮、语义清晰，适用于任何需要 select 与 checkbox 双向映射的业务场景（如“启用高级选项”开关 + 配置粒度选择）。
