做微信小程序商城_jQuery完成简略全选框

发布时间:2021-01-05 10:58 作者:jianzhan

摘要: jQuery完成简易全选框 本文关键为大伙儿详尽详细介绍了jQuery完成简易全选框,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一

jQuery实现简单全选框       这篇文章主要为大家详细介绍了jQuery实现简单全选框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现简单全选框的具体代码,供大家参考,具体内容如下

1.要求:

(1)实现全选框勾选时其他复选框全部选中,全选框取消勾选时其他 复选框全部取消选中
(2)当复选框有取消选中时,全选框也要取消勾选

2.HTML部分

 table id="table" 
 thead tr th colspan="6" 学生信息表 /th /tr /thead 
 tbody 
 input type="checkbox"id="checkedAll" value="全选" / 全选
 /th 
 th 学号 /th 
 th 姓名 /th 
 th 性别 /th 
 th 年龄 /th 
 th 学分 /th 
 /tr 
 input type="checkbox" name="items"/ 
 /td 
 td 1001 /td 
 td 小米 /td 
 td 男 /td 
 td 23 /td 
 td 100 /td 
 /tr 
 input type="checkbox" name="items"/ 
 /td 
 td 1002 /td 
 td 小栋 /td 
 td 男 /td 
 td 23 /td 
 td 50 /td 
 /tr 
 input type="checkbox" name="items"/ 
 /td 
 td 1002 /td 
 td 小栋 /td 
 td 男 /td 
 td 23 /td 
 td 50 /td 
 /tr 
 /tbody 
 /table 

3.css部分

 style type="text/css" 
 margin: 0;
 padding: 0;
 table,tr,td,th{
 border: 1px solid black;
 #table{
 border-colla凡科抠图e: colla凡科抠图e;
 border-spacing: none;
 width: 50%;
 margin: 0 auto;
 text-align: center;
 height: 40px;
 /style 

4.jQuery部分

 script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8" /script 
 script type="text/javascript" 
 $(function () {
 // 隔行换色效果
 $('#table tbody tr:even').css("background","#");
 // 定义变量接收全选框与其他复选框的对象
 var $checkedAll = $("#checkedAll");
 var $items = $(":checkbox[name=items]");
 // 全选框点击事件
 $checkedAll.click(function () {
 if (this.checked) { // $(this).prop("checked")
 $items.prop('checked',true);
 } else {
 $items.prop('checked',false);
 // 复选框全部选中时将全选框勾选上
 $items.click(function () {
 // 当没有选中的复选框个数为0时,就是全选时刻
 if ($items.not(":checked").length===0) {
 $checkedAll.prop('checked',true);
 } else {
 $checkedAll.prop('checked',false);
 /script 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


  • 20个手机微信微信小程序营

    原题目:20个手机微信微信小程序营销推广方式,get来到就可以轻轻松松拓客上百万 运用微信小程序轻轻松松获得上百万新顾客的实例颇多,菌类街根据微信小程序拓客三百万,摩拜根

  • 手机微信微信小程序程序

    八月21日,第一届全国性青少年儿童手机微信微信小程序程序编写艺术创意营入选名册发布,由39名中学生构成的14支微信小程序员团队进到总决赛,将参加手机微信官方网机构的“两天

  • “互连网+货运物流”打开

    目前,“货拉拉”“快狗打车”等同于于城货运物流货运物流综合服务平台进驻我区目前逐一一段时间,与传统式式同城网网货运物流货运物流企业不一样的是,这类综合服务平台依据

  • 公司如何做手机微信微信

    伴随着手机微信微信小程序的盛行,越来越越大公司要想制作自身的微信小程序,来开启手机微信营销推广的方式。那麼公司该如何做手机微信微信小程序?微信小程序开发设计是多少

  • 百度搜索智能化微信小程

    模拟题目:百度搜索检索智能化化手机微信微信小程序住宅小区内容通用性性发布器公布,内容发布越来越越更简单 八月2日,百度搜索检索智能化化手机微信微信小程序公布了住宅小区