javascript - jQuery:设置/重置具有特定类的表单字段(改进代码)

标签 javascript jquery html find show-hide

我是 jQuery 新手,希望有人能帮助我解决这个问题。

我有一个带有隐藏 div 的大型 HTML 表单 ('#requestDetails')。 在此 div 中,有复选框、单选按钮和具有特定值('.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();
    }
});

提前非常感谢您对此提供的任何帮助, 迈克

最佳答案

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

$('[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();
    }
});

抱歉没有检查语法,所以如果我错了请纠正我。 这并不像您在每个内容中所写的那样提高性能。

关于javascript - jQuery:设置/重置具有特定类的表单字段(改进代码),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30526567/

相关文章:

javascript - 捕获 html5/javascript onchange 事件

javascript - 在其他地方单击时菜单应该消失

javascript - 如果任务完成,用户需要选中复选框

javascript - 将文本分配给 Bootstrap 中的下拉按钮

javascript - rails - 在页面重新加载之前不显示 flash 消息?

javascript - 我想将 reviewsmaker.com iframe 集成到网站主页以显示评论,但它在页面加载期间被重定向到他们的网站

javascript - 手机导航点击出jquery

HTML/CSS block 未出现

javascript - 改变 firebugx.js 以适应 IE 开发者工具

javascript - 如何处理 websocket 中的无效 URL/IP?