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 ...
随机推荐
- 16/8/23-jQuery子调用匿名函数
通过创建一个自调用匿名函数,创建一个特殊的函数作用域,该作用域中的代码不会和已有的同名函数.方法和变量以及第三方库冲突. 自调用匿名函数写法 方法一: (function(){ //... })(); ...
- 把Notepad++的tab设置为四个空格
在7.1版本以及以后 设置->首选项->Language 勾选Repalce by space 在7.1版本以前 设置->首选项->制表符设置 右侧,转为空格,勾选上 参考: ...
- [LeetCode] 72. Edit Distance（最短编辑距离）
传送门 Description Given two words word1 and word2, find the minimum number of steps required to conver ...
- mysql内存数据淘汰机制和大查询会不会把内存打爆？
首先我们说一下大查询会不会把内存打爆? 比如说主机内存有5g,但是我们一个大查询的数据有10g,这样会不会把内存打爆呢? 答案:不会 为什么? 因为mysql读取数据是采取边读边发的策略 select ...
- jQuery基础--事件处理
2. jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极 ...
- [eclipse中使用Git插件] 008 - git操作pull、merge、stash、commit
写在前面: 看标题其实还有001-007之类,本来准备写详细的类似教程一样的东东,但是懒了且时间有限(以后或许会补吧),所以跳到008,录下主要的操作. 所以本随笔的重点就是[pull+merge+s ...
- 使用requests_html抓取数据
from requests_html import HTMLSession import json class YejiCollege: def __init__(self, url): self.u ...
- Java中的多线程基础
1.线程与进程 进程: 进程是程序运行以及资源分配的基本单位,一个程序至少有一个进程. 如下图所示: 线程: 线程是CPU调度和分配的基本单位,一个进程至少有一个线程. 同一个进程中的线程共享进程资源 ...
- Day7-----Python的序列类（有子类：元组类，列表类）
序列类型 1.基本介绍: 序列类型是一种基类类型 ,既然被称为那就肯定是有道理的,关于序列 它有 正向 和 反向 两种序号,正向序号从零开始,反向序号从负一开始 a = '例如这个字符串' ...
- TCL环境检查
set w [open 1.txt w+] foreach a [info var] { if { [llength [array name $a]]==0 } { puts $w $a:[set $ ...