ASP.Net 复选框级联选中或取消

2024-05-12 05:08

本文主要是介绍ASP.Net 复选框级联选中或取消,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

Web项目中熟练的应用各种JS的技巧,将会帮助我们更加高效的实现页面逻辑的设计。下面来和大家说说我在项目中应用到的复选框的实际代码。

内容

首先说明一下我们将要实现的效果,
可以从导航名称看出,这是一个分级的菜单列表(用户权限配置页面)
一级标题:控制面板
二级标题:系统管理 界面管理 系统用户
三级标题:数据字典 后台导航管理 管理员管理 角色 管理

当我们选中上一级目录的显示选框时,其下的所有子级选框进行联动选中。
这里写图片描述

这样的一个需求在平时的项目中也是很常见的,下面让我们从HTML来看看这个页面,列表通过ul标签分隔每行,
Class名称layer-1,layer-2,layer-3表示各级标签
这里写图片描述

那么接下来就是完成JS的功能实现了,首先是设置页面的触发事件,
触发的条件是,当任意一个复选框被选中时触发,由于页面上的复选框较多,所以专门为标有”显示”名称的复选框设置value值为’Show’;
最终的JS实现代码如下:

//复选框级联选中
$("input[value='Show']").click(function () {var $this = $(this);$this.parents("[class^='layer']:eq(0)").find(".cbllist").find("input[value='Show']").prop("checked", $this.prop("checked"));});

小结

在了解并准备实现这个功能的过程中,曾一度以为是一个很麻烦的实现过程。令人兴喜的是最终优化后的代码仅仅三行就达到了我想要实现的联动效果。这样的小小功能也让我发觉有时候站在巨人的肩膀上多查多问可以让平时觉得很麻烦的功能瞬间分解,变得简单起来。还在点滴积累的路上,荣幸与您分享~

这篇关于ASP.Net 复选框级联选中或取消的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/981678

相关文章

Windows中,.net framework 3.5安装

安装.net framework,目前已知2种方法,如下: 一、在MSDN下载对应的安装包,安装,这种可能无法安装成功,概率很大,不成功使用第二种方法,基本上没问题。 二、win8/8.1/10 下安装 .net framework 3.5.1: 1. 打开 win8/8.1/10 安装盘(这里指系统安装镜像文件),提取 sources\sxs 文件夹到 X:\sources\sxs (X代

axios全局封装AbortController取消重复请求

为什么? 问题:为什么axios要配置AbortController?防抖节流不行吗? 分析: 防抖节流本质上是用延时器来操作请求的。防抖是判断延时器是否存在,如果存在,清除延时器,重新开启一个延时器,只执行最后一次请求。节流呢,是判断延时器是否存在,如果存在,直接return掉,直到执行完这个延时器。事实上,这些体验感都不算友好,因为对于用户来说,得等一些时间,尤其是首次请求,不是那么流畅

ASP.Net.WebAPI和工具PostMan

1.WebAPI概述 1.1 WebAPI WebAPI 是一种传统的方式,用于构建和暴露 RESTUI风格的Web服务。它提供了丰富的功能和灵活性,可以处理各种HTTP请求,并支持各种数据格式,如JSON、XML等。 WebAPI使用控制器(Controllers)和动作方法(ActionMethods)的概念、通过路由配置将请求映射到相应的方法上。 开发人员可以使用各种属性和过滤器来处

TableView 当前选中的行号。 默认会使哪一行选中 加入导航条后contentInset向下偏移的64

1.得到当前选中的行号     NSLog(@"%ld %s",  [self.tableView indexPathForSelectedRow].row,__func__); 2.默认选中表格的那一行     [self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0 ]

【ASP.NET】 No 'Access-Control-Allow-Origin' header is present on the requested resource.

前端JS用XMLHttpRequest,请求后端数据。出现了No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 我是使用的ASP.NET框架。 解决办法: 在Web.config文件相应地方添加: <?xml version="1.0" encoding="utf-8"?><confi

vue dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND

本地正常。打包好的dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND 解决办法: 在webpack.prod.conf.js 中output添加参数publicPath:’./’ 在webpack.base.conf.js里 publicPath: process.env.NODE_ENV === ‘pro

导入别人的net文件报红问题sdk

1. 使用cmd命令 dotnet --info 查看自己使用的SDK版本 2.直接找到项目中的 global.json 文件,右键打开,直接修改版本为本机的SDK版本,就可以用了

MFC学习--CListCtrl复选框以及选择

如何展示复选框 //LVS_EX_CHECKBOXES每一行的最前面带个复选框//LVS_EX_FULLROWSELECT整行选中//LVS_EX_GRIDLINES网格线//LVS_EX_HEADERDRAGDROP列表头可以拖动m_listctl.SetExtendedStyle(LVS_EX_FULLROWSELECT | LVS_EX_CHECKBOXES | LVS_EX_GRIDL

HTML:使用单选框、复选框,让用户选择

语法: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1、type:    当type="radio"时,控件为单选框    当type="checkbox"时,控件为复选框 2、value:提交数据到服务器的值(后台程序PHP使用) 3、name:为控件命名,以备后台程序AS

.net 面试题总结(工作经验2年半)

一、Ajax调用的时候,get、post有什么区别? 答:get和post都是向服务器发送一种请求,只是发送机制不同     1 GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。     2.首先是”GET方式提交的数据最多只能是1024字节”,Post传输的数据量大,可以达到2M。     3.get方式请求数据会被浏览器缓存起来,因此其