使用jQuery无法根据Checkbox选中状态修改其值的问题求助

我来帮你排查这个问题，核心原因是你用错了判断checkbox选中状态的方法，再加上Switchery插件的特性，导致逻辑失效。

问题分析 #

你代码里用$(this).attr('checked')来判断是否选中，但attr()方法获取的是元素初始的HTML属性值，不是当前动态的DOM状态。比如你的checkbox默认是checked，所以attr('checked')永远会返回checked（或true），不管你后来有没有取消选中，这就导致else分支永远不会执行，弹窗一直显示1。

另外你还用到了Switchery插件，这个插件会隐藏原生的checkbox，生成自定义的UI开关。虽然它会同步原生checkbox的状态，但我们还是要确保监听的事件和状态判断是正确的。

修正后的代码 #

$('.ChkBox').change(function() {
    // 用prop()获取实时的选中状态
    if ($(this).prop('checked')) {
        $(this).val('1');
    } else {
        $(this).val('0');
    }
    alert($(this).val());
});

额外注意事项（针对Switchery插件） #

如果你发现修改后还是有问题，可能是Switchery的事件触发时机问题，可以尝试初始化插件后再绑定事件：

• 先初始化Switchery插件
• 直接监听插件的change事件同步值

示例代码：

// 初始化Switchery插件
var elems = Array.prototype.slice.call(document.querySelectorAll('.ChkBox'));
elems.forEach(function(html) {
    var switchery = new Switchery(html);
    // 监听插件的change事件
    switchery.on('change', function() {
        var checkbox = switchery.element;
        checkbox.value = checkbox.checked ? '1' : '0';
        alert(checkbox.value);
    });
});

这样就能正确同步checkbox的value值了，取消选中时会设置为0，弹窗也会显示对应的数值。

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