флажок django выбрать все по jquery

Question

Я хочу установить все флажки, когда нажимаю верхнюю кнопку ниже мой код:

run.html

<script language="JavaScript" src="media/js/jquery-1.4.2.min.js"></script>
<script language="javascript">
$("#selectAll").change(function() {
  $(".xxx:checkbox").attr('checked', this.checked);
});
</script>
Select All: <input type="checkbox" id="selectAll"><br />
<br />

One: <input type="checkbox" class="xxx" /><br />
Two: <input type="checkbox" class="xxx" /><br />
Three: <input type="checkbox" class="xxx" />

а почему не работает?

Answer 1

Поскольку selectAll не существует во время запуска <script>. Так что $("#selectAll") не соответствует ни одному элементу. (jQuery не предупреждает вас, когда вы применяете операцию к никаким элементам, просто молча ничего не делает.)

Поместите <script> ниже <input> или поместите привязку в блок $(document).ready(function() { ... });, чтобы код работал во время загрузки страницы.

В сторону: я бы избегал использования нестандартных селекторов jQuery, таких как :checkbox, где это возможно, поскольку они заставляют использовать библиотеку селекторов JavaScript Sizzle вместо быстрой нативной querySelectorAll. input.xxx[type=checkbox] был бы другой способ сказать это.

Answer 2

Вот простой пример выбора всех флажков .....

<ul>
<li><input type="checkbox" id="select_all"/> Selecct All</li>
<li><input class="checkbox" type="checkbox" name="check[]"> This is Item 1</li>
<li><input class="checkbox" type="checkbox" name="check[]"> This is Item 2</li>
<li><input class="checkbox" type="checkbox" name="check[]"> This is Item 3</li>
<li><input class="checkbox" type="checkbox" name="check[]"> This is Item 4</li>
<li><input class="checkbox" type="checkbox" name="check[]"> This is Item 5</li>
<li><input class="checkbox" type="checkbox" name="check[]"> This is Item 6</li>

<script>
  var select_all = document.getElementById("select_all"); //select all checkbox
   var checkboxes = document.getElementsByClassName("checkbox"); 
   //checkbox items

  //select all checkboxes
  select_all.addEventListener("change", function(e){
  for (i = 0; i < checkboxes.length; i++) { 
    checkboxes[i].checked = select_all.checked;
 }
});


for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function(e){ //".checkbox" change 
    //uncheck "select all", if one of the listed checkbox item is unchecked
    if(this.checked == false){
        select_all.checked = false;
    }
    //check "select all" if all checkbox items are checked
    if(document.querySelectorAll('.checkbox:checked').length == checkboxes.length){
        select_all.checked = true;
    }
});
 }
 </script>

Answer 3

Альтернатива $ (document) .ready (function () {.... вы можете использовать функцию jQuery "LIVE":

$("#selectAll").live('change',function() {
  $(".xxx:checkbox").attr('checked', this.checked);
});

Вы можете проверить это на: http://jsfiddle.net/GLTQQ/

кстати, следующее:

$(function(){
    $("#selectAll").change(function() {
        $(".checkbox_delete:checkbox").attr('checked', this.checked);
    });
});

- это сокращение для:

$(document).ready(function(){
    $("#selectAll").change(function() {
        $(".checkbox_delete:checkbox").attr('checked', this.checked);
    });
});

Answer 4

Ниже самая последняя версия, она может работать

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script> 

<script type='text/javascript'> 
$(document).ready(function(){
    $("#selectAll").change(function() {
        $(".checkbox_delete:checkbox").attr('checked', this.checked);
    });
});
</script>