python练习题之全选框全不选反选
功能
实现分为两大部分：
第一body 部分，1，通过<li>无序列表标签实现选项的基本样式，通过input的checkbox标签实现里面的复选框功能。用到了标签的嵌套。然后选项的js方法含有选中和被选中的功能。
2，button按钮部分，通过<button>标签，里面绑定onclick事件，来触发选项标签的函数功能。
第二，script部分。通过for循环，逐个遍历选项卡的各个checkd的状态，checkd= "checked"是选中状态，checkd =true“是选中状态，checkd = false 是未被选中状态。checkd = ”checkd"是默认选中状态。那么我们就可以通过改变input标签的checkd的状态是true还是false进而确定 是不是选中状态。对于反选，需要定义函数，遍历访问各个标签，如果checkd
为true，则让它为false。
代码；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var kuang =document.getElementsByTagName("input");
var anniu = document.getElementsByTagName("button");
function select(status) {
for (i=0;i<kuang.length;i++){
// 实现 全选 的功能，遍历，将每一个都选中.通过传递参数，checked属性的真假，true为选中，false为选错
kuang[i].checked = status
}
}
function selectReverse() {
for (var i =0 ; i <7;i++){
if (kuang[i].checked){kuang[i].checked =false;}
else {kuang[i].checked = true;}
}
} </script> <ul style="margin: 50px 30px 20px"> <li ><input type="checkbox" >政治</li>
<li ><input type="checkbox">英语</li>
<li ><input type="checkbox">数学</li>
<li ><input type="checkbox" >历史</li>
<li ><input type="checkbox">语文</li>
<li ><input type="checkbox" >地理</li>
<li ><input type="checkbox" >化学</li> </ul>
<button type="button" onclick="select(true)">全选</button>
<button type="button" onclick="select(false)">全不选</button>
<button type="button" onclick="selectReverse()" >反选</button> </body>
</html>
需求，如图 所示，实现右边的全选，全不选，反选
python练习题之全选框全不选反选的更多相关文章
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- JavaScript小例子：复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- Jquery表格变色 复选框全选，反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
- 复选框全选、全不选和反选的效果实现VIEW:1592
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- toFixed（）精度丢失；复选框全选、取消
一.精度丢失和重写toFixed()函数 1.重写toFixed() Number.prototype.toFixed = function(length){ var carry = 0; //存放进 ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- jQuery实现复选框 全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
随机推荐
- URL的‘#’号
转载自:传送门 去年9月,twitter改版. 一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为 http://twitter.com/username 改 ...
- Java thread(1)
这一部分主要讨论 java多线程的基本相关概念以及两种java线程的实现方式: 线程与进程: 这个操作系统书上介绍得很详细,这里就列出一些比较主要的: 线程: 线程本身有很少的资源,因为所拥有的资源较 ...
- mac安装pip并升级pip版本
最近想安装inchat,直接使用命令pip install install,结果提示 使用提示中的命令升级,结果提示找不到pip.很郁闷,明明有pip,结果一升级还给升没了.最后用的是这个方法完美 ...
- php优化方法
代码优化是开发程序和网站必不可少的一步,代码优化好了,可以大大增加程序的运行效率.使网站或程序加载反应更快.用户体验也就会更好.下面就为大家总结了50条PHP代码优化技巧. 1. 用单引号代替双引号来 ...
- Python 学习笔记18 异常处理
我们在编码的过程中,难免会遇到一些错误和异常, 这时候程序会异常退出,并且会抛出错误信息: 比如: print(1/0) ''' 输出: Traceback (most recent call las ...
- NodeJs的CommonJS模块规范
前言 本人记忆力一般,为了让自己理解<深入浅出Node.js-朴灵>一书,会在博客里记录一些关键知识,以后忘了也可以在这里找到,快速回想起来 Node通过require.exports.m ...
- k3 cloud库存管理中的直接调拨单权限分配出现问题
k3 cloud中给直接调拨单分配了对应的权限,但是客户端无法查看到对应的单据 解决办法: 是应为没有发布到对应的客户端和浏览器端,打开bos,找到对应的单据并点击发布,找到对应的目录,如图所示: 把 ...
- react native 打包至iphone设备
1.新建bundle 在自己项目的ios文件夹下新建一个文件夹取名bundle PS:ios文件夹和node_modules文件夹在同一级目录下,这个bundle文件夹名称随意取,后面要用到,但是记得 ...
- smbtar - 直接备份SMB/CIFS共享资源到UNIX磁带设备的shell脚本
总览 smbtar -s server [-p password] [-x service] [-X] [-d directory] [-u user] [-t tape] [-b blocksize ...
- POJ 3237 树链剖分
题目链接:http://poj.org/problem?id=3237 题意:给定一棵n个结点n-1条边的树. 每条边都是一个边权. 现在有4种操作 1:CHANGE I V:把(输入的)第i条边的边 ...