Джанго флажок выбрать все с помощью 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

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

<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> 

Answer 3

Альтернатива $ (документ) .ready (функция() {.... вы можете использовать JQuery-Function "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

Вот простой пример для выбора всех Checkbox .....

<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>