如何实现点击checkbox复选框时动态修改其value值

实现方案 #

直接替换原有JS逻辑为以下代码即可满足需求：

jQuery(document).ready(function() {
  // 绑定change事件，覆盖点击checkbox、点击关联label两种触发场景
  jQuery('#my-form .checkbox-value input[type="checkbox"]').on('change', function() {
    // 根据当前勾选状态动态修改value
    jQuery(this).val(jQuery(this).is(':checked') ? 'yes' : 'no');
  });
});

原有HTML代码无需修改。

逻辑说明 #

• 选择change而非click事件绑定：只要checkbox的勾选状态发生变化就会触发，无需额外适配label点击的场景，覆盖所有用户操作路径。
• 直接操作当前触发事件的checkbox元素，无需通过value属性查找其他元素，避免了原有逻辑中误匹配其他同属性控件的问题。
• 勾选状态判断使用is(':checked')写法，可读性更高，后续维护更方便。

如果需要验证修改效果，可以在JS中插入console.log(jQuery(this).val())查看每次状态变更后的value值。

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