Question

我想要重置的div中有很多复选框。所有这些都有相同的变化事件。单击重置按钮时，将比较当前属性和data-default，如果不同，则将属性设置为此值并触发更改事件。

数据默认值是页面加载时设置的复选框的选中状态，或者当ajax保存部分时。

var $checkboxes = $section.find(":checkbox");

for (var i = 0; i < $checkboxes.length; i++) {
    var $cb = $($checkboxes[i]);

    var currentValue = $cb.prop("checked");
    var defaultValue = $cb.data("default");

    if (currentValue !== defaultValue) {
        $cb.prop("checked", defaultValue)
            .trigger("change");
    }
}

这里的问题是性能。使用jquery为70个复选框触发更改事件大约需要1秒。当有1000个复选框要重置时，大约需要5分钟（如果浏览器没有崩溃）。

是否有更好的方法可以为对象数组触发onchange事件，也许使用vanilla javascript？

Answer 1

您的代码似乎没有多大问题。你的回调可能存在性能瓶颈。你可以做一件事。如果您使用的是Chrome，则可以使用Chrome Profiler，它会告诉您确切的时间。开发人员工具中有一个性能选项卡可以帮助您解决问题。

Answer 2

如果我的问题正确，您希望在点击重置按钮时检查所有复选框..我建议使用jQuery function each()并简化您的代码

我一直在使用此代码来选择包含大量复选框的联系人列表中的所有名称，并且运行速度很快，希望它能为您做同样的事情！

＆＃13;

$('#reset-button').click(function() {
    
    // Search for each checkbox
    $("input[type='checkbox']").each( function(){
    
        // Verify if is checked
        $value = $(this).is( ":checked" );
        
        if( $value == false ){
           // If not checked, turns checkbox into checked state
            $(this).prop("checked", true);
        }
        
    });
    
});

＆＃13;

button {
    margin-bottom: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="reset-button">Reset</button>


<div>
    <input type="checkbox" value="one">1
    <input type="checkbox" value="two" checked>2
    <input type="checkbox" value="three">3
    <input type="checkbox" value="four">4
    <input type="checkbox" value="five" checked>5
    <input type="checkbox" value="six" checked>6
    <input type="checkbox" value="seven" checked>7
    <input type="checkbox" value="eight">8
</div>

＆＃13;

元素/节点列表上的触发器更改太慢

2 个答案: