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);
        }
    }
}
时间: 2024-11-05 17:23:25

jquery实现checkbox的单选和全选的相关文章

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

jquery实现checkbox的单选和全选 一.思路 全选:判断“全选”checkbox的状态,如果选中则把tbody下所有的checkbox选中,反之 单选:主要是判断有没有全选,如果不是选中状态就把全选的checkbox状态设置为false,如果是选中就拿所有选中状态下“name=id”的chekbox和所有‘’name=id"的数量去比较,如果一样表示全选了,设置全选的chekbox为选中状态,反之. 二.代码 1.css部分,直接搬运的django项目里面的. <table bo

jQuery实现Checkbox中项目开发全选全不选的使用

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Checkbox的练习</title> 5 <style type="text/css"> 6 *{margin:0px;padding:0px;} 7 table{width:100%;text-align:center;} 8 </style> 9 10 <script

checkbox实现单选,全选,反选,取消选

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

jquery checkbox的相关操作——全选.反选.获得所有选中的checkbox 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']&

单选,全选操作js相关技术

jsp上编写全选框,单选框 全选框 1 <td class="TableHeaderCell" style="width: 30px;"> 2 <input id="checkedAll" type="checkbox"> 3 </td> 单选框 <input id="fappChecked" name="checkedFapp" type=&q

Android开发CheckBox控件,全选,反选,取消全选

在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_paren

jquery小代码之整页全选

待整理...... 关于checkbox $("[name='checkbox']").attr("checked",'true');//全选 $("[name='checkbox']").removeAttr("checked");//取消全选 $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 反选 $("

jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选

本文章总结jQuery实现checkbox三种情况的全选功能 第一种:等值全选,也称name的等值全选,通过checkbox的名称name实现. 第二种:模糊全选,也称id模糊全选,通过checkbox的id或value值实现. 第三种:值范围全选,也称value值范围全选,通过checkbox的value值实现,或者截取id数字后缀范围判断实现. 等值全选 在工作中经常会用到checkbox的全选功能,平时大家用得最多的全选和反选是第一种,一般都是基于全部名称相同的checkbox进行实现,这

checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><h