使用带有 HTML 按钮的 jQuery 脚本

Question

在我的 Django 管理表单中，我有一个如下所示的字段：

Select All 按钮使用jQuery 脚本：

$(document).ready(function () {
    $('#id_season_0').click(function (event) { //on click 
        if (this.checked) { // check select status
            $('.checkbox').each(function () { //loop through each checkbox
                this.checked = true; //select all checkboxes with class "checkbox1"               
            });
        } else {
            $('.checkbox').each(function () { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });
        }
    });
});

但问题是：Select All 也是我的models 中的一个字段，我不想再拥有它了。所以我实际上正在尝试进行一些修改。对于SelectAll，我想使用HTML button 而不是BooleanField。

所以我在change_form.html 中使用此代码：

<button id="selectall" type="button" class="checkbox"> Select All </ button>

我尝试将 id 更改为 selectall 但这不起作用。请帮忙 ？

Answer 1

您有几个选择。无论选择什么都不应该是模型中的一个字段。如果您使用的是 ModelForm，您仍然可以在使用 form.fields['season'] = forms.BooleanField() 创建表单后添加字段。

该字段不会保存到数据库中。但是您也可以在 html 中添加任何您想要的内容并使用它来切换。

如果它是一个按钮，我可能会这样做：

$('#selectall').click(function (event) { //on click 
    $(this).toggleClass('checked_all');
    $('.checkbox').prop('checked', $(this).hasClass('checked_all'));
});

做同样事情的代码要少得多。大多数情况下，您可以使用 jQuery 避免 .each() 。如果您选择了多个对象，您可以在一行中更改多个对象。

$('.checkbox').prop('checked', $(this).hasClass('checked_all'));

这表示将所有 .checkbox 元素设置为 $(this).hasClass('checked_all') 的值。 （真或假，我们每次都用 $(this).toggleClass('checked_all') 来切换它）。

Answer 2

注意：我在这里做了一些假设，因为您没有包含完整的 html。

您可以保留复选框并执行以下操作：

$(document).ready(function () {
    $('#id_season_0').click(function (event) { //on click 
        if (this.checked) { // check select status
            $('.checkbox').not('#id_season_0').each(function () { //loop through each checkbox
                this.checked = true; //select all checkboxes with class "checkbox1"               
            });
        } else {
            $('.checkbox').not('#id_season_0').each(function () { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });
        }
    });

});

添加 .not('#id_season_0') 将意味着忽略全选复选框。

jQuery .not() documentation

如果您真的想使用按钮，请使用：

$(document).ready(function () {
    $('.selectAll').click(function (event) { //on click 
        if (this.checked) { // check select status
            $('.checkbox').each(function () { //loop through each checkbox
                this.checked = true; //select all checkboxes with class "checkbox1"               
            });
        } else {
            $('.checkbox').each(function () { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });
        }
    });

});

和html：

<button type="button" class="checkbox selectAll">Select All</button>