Changing checked state slow. Changing multiple checkbox instances at once can cause browser to become unresponsive.

[ZepAviator]

Description

I have a case where I need to set or unset all the checkboxes in a list. I have a few dozen checkboxes.

When looping through the elements and turning on or off the checkbox, the browser becomes unresponsive. It seems as though the performance between setting the checked state on or off is slow. Magnified by a large group of checkboxes to toggle or set, the performance becomes unmanageable.

<div id="places-list-container">
  <template id="places-list" is="dom-repeat" items=[[choices]] as="option">
      <paper-checkbox class="place-checkbox" checked$=[[option.checked]] value=[[option.value]]>
         [[option.header]]
      </paper-checkbox>
  </template>
</div>

changeSelectionOptions: function(setAllOn) {
          var options = this.$['places-list-container'].getElementsByClassName('place-checkbox');
          if (setAllOn) {
            _.each(options, function(option) {
                option.checked = true;
            });
          }
          else {
            _.each(options, function(option) {
              option.checked = false;
            });
          }
        }

The above example shows a dom-repeat, but the same issue exists if I just create a bunch of paper-checkbox in a list.

I have tried setting it elementInstance.checked = true/false, elementInstance.setAttribute('checked'), and setting the binding choices[1].checked = false;

Expected outcome

The check should toggle states almost instantly.

Actual outcome

Delay in checkbox changing states, changing even a dozen paper-checkboxes in a loop will cause the browser to hang.

Browsers Affected

Tested Below (have not tested others yet)

• [X ] Chrome
• [ X] Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10