Django框架---jquery实现checkbox的单选和全选

Posted sunxiuwen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django框架---jquery实现checkbox的单选和全选相关的知识,希望对你有一定的参考价值。

jquery实现checkbox的单选和全选

 

一、思路

全选:判断“全选”checkbox的状态,如果选中则把tbody下所有的checkbox选中,反之

单选:主要是判断有没有全选,如果不是选中状态就把全选的checkbox状态设置为false,如果是选中就拿所有选中状态下“name=id”的chekbox和所有‘’name=id"的数量去比较,如果一样表示全选了,设置全选的chekbox为选中状态,反之。

二、代码

1.css部分,直接搬运的django项目里面的。

技术分享图片
<table border="2" style="margin: 0 auto;text-align: left;width: 800px">
        <thead>
        <tr>
            <th><input type="checkbox" name="all">全选</th>
            <th>id</th>
            <th>用户名</th>
            <th>昵称</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb">
        {% for user in userlist %}
            <tr>
                <td><input type="checkbox" name="id" value="{{ user.UserID }}" onclick="userCheck(this)"></td>
                <td>{{ user.UserID }}</td>
                <td>{{ user.Username }}</td>
                <td>{{ user.NickName }}</td>
                <td>{{ user.Email }}</td>
                <td>{{ user.Role.RoleName }}</td>
                <td>
                    <img id="update" src="/static/img/edit-new.png" onclick="getUser({{ user.UserID }})">
                    <img id="delete" src="/static/img/edit_remove.png" onclick="userdelete({{ user.UserID }})">
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
技术分享图片

 

2.js部分,name和id都可以根据实际修改

技术分享图片
$(function () {
    //全选,设置chheckbox name=‘all‘ tbody id=tb
    $("input[name=all]").click(function () {
        if (this.checked) {
            $("#tb :checkbox").prop("checked", true);
        } else {
            $("#tb :checkbox").prop("checked", false);
        }
    });
});
//单选 设置name=id
function userCheck(ths) {
    if (ths.checked == false) {
        $("input[name=all]:checkbox").prop(‘checked‘, false);
    }
    else {
        var count = $("input[name=‘id‘]:checkbox:checked").length;
        if (count == $("input[name=‘id‘]:checkbox").length) {
            $("input[name=all]:checkbox").prop("checked", true);
        }
    }
}
技术分享图片

以上是关于Django框架---jquery实现checkbox的单选和全选的主要内容,如果未能解决你的问题,请参考以下文章

Python入门自学进阶-Web框架——8认识Ajax,与Django交互,基于jQuery

Django框架开发-基于Ajax实现的登录

Django中使用jquery的ajax进行数据交互

Django REST框架分页的jQuery代码

超级简单python基于django框架仓库管理系统设计与实现mysql数据库(项目源码+数据库)

python进阶