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);}}
}

转载于:https://www.cnblogs.com/huguodong/p/7357163.html

jquery实现checkbox的单选和全选相关推荐

js实现表单checkbox的单选，全选
全选&单选 //<input type="checkbox" name="" class="quan" value=" ...
微信小程序实现单选、全选功能
前言概述本文介绍微信小程序实现单选.全选功能,效果如下: 实现过程 1.先实现页面效果,文件*.wxml和*.wxss代码如下: <view class="container&quo ...
DataGridVidw添加CheckBox。并通过一个 CheckBox来控制其全选。
嘿嘿,又是我!来吧,开始今天的分享时间-- 公共方法绑定 DataGridView表头,此方法可以通用. private void dgVColumName(DataGridView dgvper) ...
微信小程序checkbox的全选以及所有checkbox选中之后的全选
微信小程序checkbox的全选以及所有checkbox选中之后的全选微信小程序checkbox的全选以及所有checkbox选中之后的全选第一次写,软件都不懂,直接把代码拷过来了模板 WXML ...
微信小程序实现单选、全选、反选、取消全选功能
实现效果源代码 <viewclass="parkNotice-email"v-for="(item2, index2) in ...
Android开发CheckBox控件，全选，反选，取消全选
在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢首先布局我们的界面: <?xml version="1.0" enc ...
jQuery 实现表格与 ckeckbox 的全选、单选功能
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 功能点 1. 用户点击头的checkbox时,所有表格数据行的checkbox全选或反选. 当数据 ...
学习 jQuery下拉框,单选框,多选框整理
获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $( ...
jQuery获取及设置单选框,多选框,文本框内容
在工作中,text,radio,checkbox,select在开发过程中是必不可少的一部分.在开发过程中经常要处理页面表单元素. Eg: 在复选框checkBox中获取checked的valu ...

jquery实现checkbox的单选和全选

一、思路

二、代码

jquery实现checkbox的单选和全选相关推荐

最新文章

热门文章