一、思路

全選：判斷“全選”checkbox的狀態(tài)，如果選中則把tbody下所有的checkbox選中,反之

單選：主要是判斷有沒(méi)有全選，如果不是選中狀態(tài)就把全選的checkbox狀態(tài)設(shè)置為false,如果是選中就拿所有選中狀態(tài)下“name=id”的chekbox和所有‘’name=id"的數(shù)量去比較，如果一樣表示全選了，設(shè)置全選的chekbox為選中狀態(tài)，反之。

二、代碼

1.css部分，直接搬運(yùn)的django項(xiàng)目里面的。

<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>用戶(hù)名</th><th>昵稱(chēng)</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都可以根據(jù)實(shí)際修改

$(function () {//全選,設(shè)置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);}}); }); //單選 設(shè)置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);}} }

?

轉(zhuǎn)載于:https://www.cnblogs.com/huguodong/p/7357163.html

總結(jié)

以上是生活随笔為你收集整理的jquery实现checkbox的单选和全选的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。