ASP.NET javascript实现选择功能
互联网 2021/4/7 20:38:37 次
①Default.aspx文件
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script type="text/javascript" language="javascript"> function checkAll() { var a = document.getElementsByName("ck"); for (var i = 0; i < a.length; i++) { var c = a[i]; c.checked = true; } } function checkNOAll() { var a = document.getElementsByName("ck"); for (var i = 0; i < a.length; i++) { a[i].checked = false; } } function checkReverse() { var a = document.getElementsByName("ck"); for (var i = 0; i < a.length; i++) { var c = a[i]; if (c.checked == true) { c.checked = false; } else { c.checked = true; } } } </script> </head> <body> <form id="form1" runat="server"> <div> <input id="Checkbox1" type="checkbox" name="ck"/>路飞 <input id="Checkbox2" type="checkbox" name="ck"/>索隆 <input id="Checkbox3" type="checkbox" name="ck"/>山治 <input id="Checkbox4" type="checkbox" name="ck"/>萨博<br /> <input id="Button1" type="button" value="全选" οnclick="checkAll()" /> <input id="Button2" type="button" value="全不选" οnclick="checkNOAll()"/> <input id="Button3" type="button" value="反选" οnclick="checkReverse()"/> </div> </form> </body> </html>
②效果图
Ⅰ.全选
Ⅱ.全不选
Ⅲ.反选
③说明:
Ⅰ.选中“路飞”“索隆”点击全选则全部选中。
Ⅱ.选中“路飞”“索隆”“萨博”点击全不选则全部取消选中。
Ⅲ.选中“山治”“萨博”点击反选则选择其他两个选项(“路飞”“索隆”)。

关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[ASP.NET javascript实现选择功能]http://www.zyiz.net/tech/detail-153519.html
您可能感兴趣的文章:
- 2020-02-22.netcore 3.1高性能微服务架构:加入swagger接口文档
- 2019-09-04迭代器模式随想
- 2019-09-04C#开发BIMFACE系列12 服务端API之文件转换
- 2019-09-04.NET Core 学习资料精选:进阶
- 2019-09-04.Net cache与cache更新
- 2019-09-04ASP.NET Core 2.1 : 十二.内置日志、使用Nlog将日志输出到文件
- 2019-09-04ASP.NET Core 2.2 : 十六.扒一扒新的Endpoint路由方案
- 2021-04-11C#200个基础工具类,史上最全快收藏下载
- 2021-04-11C# 结构体与类的区别
- 2021-04-11C#高级编程(第6版)所有源代码实例锦集

扫描二维码或查找【程序员编程王】
可以随时随地学编程啦!
共有 条评论 网友评论