Jquery 'prop' делает хром невосприимчивым к большому количеству флажков

Question

У меня есть веб-приложение, в котором есть список флажков asp.net, который содержит отметки 1000+. На моей странице есть 6 списков флажков этого типа. У меня есть две кнопки «проверить все» и «снять отметку со всех» поверх каждого списка флажков, чтобы проверить и снять все флажки одним щелчком мыши.

Вот мой код

$('#btnCheckAllName').click(function() { 
      $('[id$=cblName] :checkbox').prop('checked', true); 
     }); 

Я использую JQuery-1.9.1.js. Этот код хорошо работает в mozilla 33.1, но когда я запускаю этот код в chrome 41.0, чтобы проверить все флажки в списке, он становится зависающим и через некоторое время в сообщении говорится, что он убивает страницу.

, но когда я использовал каждый цикл, чтобы проверить все флажки, как показано ниже.

$('#btnCheckAllName').click(function (e) { 
      $("#HeadContent1_cblName > tbody > tr").each(function() { 
       $($(this).find("input[id^=HeadContent1_cblName_]")).prop('checked', true); 
      }); 
     }); 

properly.Also это работать, если я начинаю отладчик в хроме и писать предупреждения() он приходит через 2-3 минуты, а значит, хром hang.Please может любой сказать мне, почему первый один работает в огне лиса, а не в хроме?

Вот HTML

<table id="HeadContent1_cblName"> 
     <tbody> 

      <tr> 
       <td> 
        <input id="HeadContent1_cblName_0" type="checkbox" value="asdf" name="ctl00$HeadContent1$cblName$0"> 
        <label for="HeadContent1_cblName_0">asdf</label> 
       </td> 
      </tr> 


      <tr> 
       <td> 
        <input id="HeadContent1_cblName_1" type="checkbox" value="asdf" name="ctl00$HeadContent1$cblName$1"> 
        <label for="HeadContent1_cblName_1">asdf</label> 
       </td> 
      </tr> 

     </tbody> 

    </table> 

Answer 1

У меня есть ощущение, что проблема не связана с .prop(), а с выбором DOM.

Вы первый селектор использует нестандартный селектор, поэтому он реализован в JavaScript. Кроме того, вы применяете [id$=cblName] и :checkbox к каждому найденному элементу, а не только к input элементам.

Так что первое улучшение было бы:

// v--or whatever v--only inputs 
$('div[id$=cblName] input:checkbox').prop('checked', true); 

---

Но использовать полностью нативный селектор, используйте [type=checkbox] вместо :checkbox:

// v--or whatever v--only inputs 
$('div[id$=cblName] input[type=checkbox]').prop('checked', true); 
// ---------------------------^-- native selector for only checkboxes 

Это также должно дать толчок.

---

Примечание:

Вы не предоставил HTML-разметку, но угадывание из вашего второго кодового блока, cblName элемент является:checkbox. Это означает, что первый селектор просто ошибается. Это должно быть вместо этого:

$('input[id$=cblName]:checkbox').prop('checked', true); 

или лучше:

$('input[id$=cblName][type=checkbox]').prop('checked', true); 

Примечание Я удалил пространство перед :checkbox. Как вы это делали, вы искали потомков input, что не имело бы смысла.