jQuery: 设置/重置带有特定 class 的表单字段（改进代码）

Question

我是 jQuery 的新手，希望这里有人可以帮助我。

我有一个大 HTML 表单，其中 隐藏 div ('#requestDetails')。在这个 div 中，有复选框、单选按钮和带有特定 class 的特定值 ('.hiddenDefault') 的选择，用于仅在它们可见时应用默认值。

现在我有一个显示此 div 的特定事件和另一个再次隐藏它的事件。

显示的时候div我想设置上面的默认值
隐藏时我想重置字段，包括。 div 中的所有输入字段（即取消选中/取消选择它们并删除任何默认值或输入的值）。

我有以下代码，乍一看没问题，但我想知道这是否是正确/有效的代码，我是否遗漏了任何内容，以及是否有更好/更快的方法来实现相同的。

我的jQuery:

$('[name=requestType]').on('change', function(){
    if($(this).hasClass('triggerDiv')){
        $('#requestDetails').find('.hiddenDefault').each(function(){
            // set default values + show div
            $(this).not('select').prop('checked', true);
            $(this).not('input[type=checkbox], input[type=radio]').prop('selected', true);
        });
        $('#requestDetails').show();
    }else{
        $('#requestDetails').find('input, select').each(function(){
            // empty / reset fields + hide div
            $(this).find('input[type=checkbox], input[type=radio]').prop('checked', false);
            $(this).find('input').not(':button, :checkbox, :hidden, :radio, :reset, :submit').val('');
            $(this).find('select').prop('selected', false);                     
        });
        $('#requestDetails').hide();
    }
});

非常感谢您对此提供的帮助，麦克

Answer 1

只是改进您编写的代码的语法或风格：

$('[name=requestType]').on('change', function(){
    if($(this).hasClass('triggerDiv')){
        // show div + set default values
            $(this).not('select').prop('checked', true);
        $(this).not('input[type=checkbox], input[type=radio]').prop('selected', true);
            $('#requestDetails').show();
    }else{
        // hide div + reset fields
             $('#requestDetails').find('input[type=checkbox], input[type=radio], input, select').not(':button, :checkbox, :hidden, :radio, :reset, :submit').val('').prop('checked', false);             
             $('#requestDetails').hide();
    }
});

抱歉，我没有检查语法，如果我错了，请纠正我。这不会像你在每个里面写的那样提高性能。

jQuery: 设置/重置带有特定 class 的表单字段（改进代码）

jQuery: set / reset form fields with certain class (improve code)

html

javascript

jquery

find

show-hide