1

我正在编写一个 Django 应用程序,并结合了样板模板。我有一个带有复选框的表格,我正在尝试使用 javascript 实现全选复选框,但无法正常工作

按照这个推荐django checkbox select all by jquery 我把 main.js

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

我也试过直接放在 index.html 上

在我的 index.html 上你写了

<input type="checkbox"  id="selectAll"  />
<label for="selectAll"> Select</label>

 {% for event in latest_events_list %}
 <input type="checkbox" class="checkbox_delete" name="event" id="event.id"
         value="{{ event.id }}"  />
{% endfor %}

页面正确显示,但 javascript 不起作用

样板文件生成 js 文件的链接。在标题中出现

<script src="/static/js/dh5bp/vendor/modernizr-2.6.2.min.js"></script>

在关闭 body 标签之前:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write ('<script     src="/static/js/dh5bp/vendor/jquery-1.10.2.min.js"><\/script>')</script>
 <script src="/static/js/dh5bp/plugins.js"></script>
 <script src="/static/js/main.js"></script>

所有 js 文件都正确链接,我可以关注它们

我没有使用 js 的经验,所以我不知道我是否遗漏了什么。

编辑:

我在两个浏览器上都安装了 firebug。在Firefox上它警告我

TypeError: $(...).live is not a function    

$("#selectAll").live('change',function() { 

所以我改变了代码

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

现在它只在我第一次加载页面时工作,但如果我“全选”和“取消全选”我不能再次“全选”它们

4

3 回答 3

1
$(".checkbox_delete:checkbox").attr('checked', $(this).attr('checked));

试试这个

于 2013-10-24T14:42:20.813 回答
1

终于成功了,

问题是 attr()

根据this post jquery选择所有复选框

在 jQuery 1.6 及更高版本中,prop() 应该用于“检查”状态,而不是 attr() 传递 true 或 false

最后工作代码是

$("#selectAll").change(function() {
   $(".checkbox_delete:checkbox").prop('checked', this.checked);
});
于 2013-10-24T21:47:12.047 回答
0

我能在您的代码中找到的唯一错误如下:

$(".checkbox_delete:checkbox").attr('checked', this.checked);

这应该是

$(".checkbox_delete[type="checkbox"]").attr('checked', this.checked);

笔记

[type="checkbox"].checkbox_delete如果您有良好的类名并且不使用收音机等,则不需要。

您的原始选择器无效。您会在控制台中记录错误。

在 Firefox 中,此操作的快捷方式是F12,如果您没有安装 FF / Chrome 的 firebug,我建议您这样做,因为这是检查 JS 错误的一种非常好的方法,通常也可以解决它们。

于 2013-10-24T13:44:43.187 回答