如何用jQuery触发Bootstrap 3的data-toggle？表单复选框重置异常求助

这个问题我太熟了！核心原因很简单——你只是手动把复选框的checked状态改成了false，但没有触发它的change事件，所以负责显示/隐藏的checkFormFld函数根本没跑起来，那些额外的表单元素自然不会乖乖隐藏啦。

下面给你几种靠谱的解决方案：

方案1：利用表单重置 + 手动触发change事件 #

浏览器原生的form.reset()会把所有表单元素恢复到初始状态（包括复选框的勾选状态），但它不会触发任何元素的change事件，所以我们需要手动补这一步：

// 绑定「添加新记录」按钮的点击事件
$('.add-new-record-btn').on('click', function() {
    // 重置整个表单到初始状态
    $('form')[0].reset();
    // 手动触发复选框的change事件，让checkFormFld执行
    $('.account-type').trigger('change');
});

方案2：手动清空复选框 + 触发事件 #

如果不想用表单重置，而是自定义清空逻辑，记得用prop()修改复选框状态（而不是attr()，因为checked是DOM元素的属性，prop更准确），然后同样触发change事件：

$('.add-new-record-btn').on('click', function() {
    // 取消所有account-type复选框的勾选
    $('.account-type').prop('checked', false);
    // 强制触发change事件，触发显示/隐藏逻辑
    $('.account-type').trigger('change');
    // 清空其他表单元素（比如输入框、文本域）
    $('input[type="text"], textarea, select').val('');
});

优化你的checkFormFld函数（可选） #

如果你的表单有多个复选框，建议把checkFormFld改成遍历处理的形式，确保每个复选框对应的元素都能正确显示/隐藏：

$('.account-type').on('change', checkFormFld);

function checkFormFld() {
    // 遍历每个account-type复选框
    $('.account-type').each(function() {
        // 假设你用data-target属性关联需要切换的元素
        var targetSelector = $(this).data('target');
        var $targetEl = $(targetSelector);
        
        if ($(this).is(':checked')) {
            $targetEl.show();
        } else {
            $targetEl.hide();
        }
    });
}

这样不管是单个还是多个复选框，都能精准对应到各自的目标元素。

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