分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

jQuery 全选与不全选 Jquery each

发布时间:2023-09-06 02:00责任编辑:郭大石关键词:jQuery

关于复选框全选 反选等问题的知识积累

1、项目中用到的js片段

<script type="text/javascript"> ???????jQuery(function () {       ?//当全选点击的时候 ???????????jQuery("thead tr th:first input").click(function () { ???????????????//将要需要全选的复选框的选中状态同 全选复选框的选中状态一样 ???????????????jQuery("tbody tr td ?input").attr("checked", this.checked); ???????????});       ?//出全选以外的复选框 ???????????jQuery("tbody tr td ?input").click(function () {         //如果当前复选框为false时 ?全选的复选框将不被选中 ???????????????if (!this.checked) {            //设置全选的复选框为不选中 ???????????????????jQuery("thead tr th:first input").attr("checked", this.checked); ???????????????} else {            //判断其他复选框是否全部选中 ?如果全为选中状态则将 全选复选框设置为选中状态true否则设置为false ???????????????????if (jQuery("tbody tr td ?input:checked").length == jQuery("tbody tr td ?input").length) { ???????????????????????jQuery("thead tr th:first input").attr("checked", this.checked); ???????????????????} ???????????????} ???????????}) ???????})</script>
最终效果

 2、简单实例代码

//html片段<div id="allcheckbox"> ?<input type="checkbox" class="checkall" style="width: 20px; height: 20px" /></div><div id="childrencheckbox"> ?<input type="checkbox" class="checkall" style="width: 20px; height: 20px" /> ?<input type="checkbox" class="checkall" style="width: 20px; height: 20px" /> ?<input type="checkbox" class="checkall" style="width: 20px; height: 20px" /> ?<input type="checkbox" class="checkall" style="width: 20px; height: 20px" /></div>
//js代码片段//注意:在这执之前要引入jquery的js额<script type="text/javascript"> ???????jQuery(function () { ???????????jQuery("#allcheckbox input").click(function () { ???????????????jQuery("#childrencheckbox ?input").attr("checked", this.checked); ???????????}); ???????????jQuery("#childrencheckbox ?input").click(function () { ???????????????if (!this.checked) { ???????????????????jQuery("#allcheckbox input").attr("checked", this.checked); ???????????????} else { ???????????????????if (jQuery("#childrencheckbox ?input:checked").length == jQuery("#childrencheckbox ?input").length) { ???????????????????????jQuery("#allcheckbox input").attr("checked", this.checked); ???????????????????} ???????????????} ???????????}) ???????})</script>

 3、each的使用获取选中的项 并循环得到他的id

//id保存在复选框的pid属性中var intid = "";jQuery("tbody tr td ?input:checked").each(function (index, element) { ?intid = intid + jQuery(this).attr("pid") + ",";})if (intid == "") { ?alert("没有选中数据项"); ?return;}
//循环数据var arr1 = [ "one", "two", "three", "four", "five" ];$.each(arr1, function(){alert(this);});

jQuery 全选与不全选 Jquery each

原文地址:https://www.cnblogs.com/lovable/p/7122382.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved