run.html

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() { ... });块中，以使代码在页面加载时运行。

除此之外：我会尽可能避免使用像:checkbox这样的非标准jQuery选择器，因为它们强制使用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

替代$（document）.ready（function（）{....你可以使用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>

django复选框全部按jquery选择

run.html

4 个答案: