本文介绍如何使用 jquery 实现 `
在表单交互开发中，常需让不同控件（如下拉框与复选框）保持状态一致。本例中，目标逻辑明确：
- ✅ 当
- ✅ 当复选框被取消勾选 →
- ❌ 原代码错误地调用了 prop("null")、prop("Yes") 等无效属性操作，且误用 .text() 修改
正确实现方式（推荐）
使用 .change() 事件替代 .blur() / .click()，确保状态变更时机准确；通过 val() 获取/设置 select 值，用 prop('selected', true) 精准控制选项选中状态：
$(function() {
const $select = $('#test-1');
const $checkbox = $('#test-2');
// 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);
}
});
});关键注意事项
- 避免滥用 .prop() 设置无效属性：$el.prop("null") 或 $el.prop("Yes") 不会生效，且可能引发静默错误；应使用 .find('[value="..."]').prop('selected', true) 显式定位并选中目标
- 不要修改 ：原代码中 $("#test-1 option:selected").text("") 会清空选项显示文字（如把 “Yes” 变成空白），破坏 UI。正确做法是仅切换 selected 状态，保留所有选项原始文本。
- 语义化 value 值：value="null" 是合法字符串值（非 JS null），适合表示“无选择”；若需真正对应 JS null，建议改用 value="" 并在逻辑中统一处理空字符串。
- 事件委托更佳实践：对动态生成的元素，可改用 $(document).on('change', '#test-1', handler)，但本例静态 DOM 下直接绑定更简洁。
完整可运行示例（含 HTML）
Select YES or MAYBE to auto-check the box.
Test 1:
Test 2:Status will appear here
✅ 小技巧：$select.val('null') 比 $select.find('option[value="null"]').prop('selected', true) 更简洁且等效——jQuery 的 .val() 在 上会自动匹配并选中对应 value 的 ，推荐优先使用。
通过以上方案，即可实现健壮、可维护、符合语义的双向联动，彻底规避因误操作 DOM 属性导致的界面异常问题。
