JavaScript-checkbox标签-隐藏、显示、全选、取消和反选等操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.4;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
z-index: 10;
margin-top: -200px;
margin-left: -250px }
</style>
</head>
<body style="margin: 0"> <div>
<input type="button" value="添加" onclick="ShowModel();"/>
<input type="button" value="全选" onclick="ChooseAll();"/>
<input type="button" value="取消" onclick="CancleAll();"/>
<input type="button" value="反选" onclick="Reverse();"/>
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
<th>IP</th>
</tr> </thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>hehe</td>
<td>90</td>
<td>10.192.17.20</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>haha</td>
<td>2375</td>
<td>10.192.17.21</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>gaga</td>
<td>6379</td>
<td>10.192.17.22</td>
</tr> </tbody>
</table>
</div>
<!-- 遮罩层start-->
<div id="i1" class="c1 hide"> </div>
<!-- 遮罩层end-->
<!--弹出框--> <div id="i2" class="c2 hide"> <p><input type="text"/></p>
<p><input type="text"/></p>
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="确定"/>
</p>
</div>
<!--弹出框-->
<script>
//弹框的显示和隐藏ShowModel、HideModel
function ShowModel(){
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function HideModel(){
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
//全选
function ChooseAll() {
//获取所有的tr
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
//循环所有的tr,current_tr
for (var i = 0; i < tr_list.length; i++) {
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
// 给checkbox设置为true就代表勾选，false就代表取消 checkbox.checked = true; }
}
//取消全选
function CancleAll() {
//获取所有的tr
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
//循环所有的tr,current_tr
for (var i = 0; i < tr_list.length; i++) {
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
// 给checkbox设置为true就代表勾选，false就代表取消 checkbox.checked = false; }
}
//反选
function Reverse() {
//获取所有的tr
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
//循环所有的tr,current_tr
for (var i = 0; i < tr_list.length; i++) {
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
// 给checkbox设置为true就代表勾选，false就代表取消
/*
第一种和第二种都可以都能实现反选
if (checkbox.checked){
checkbox.checked=false;
}
else
{
checkbox.checked=true; }*/
checkbox.checked = ! checkbox.checked; } } </script>
</body>
</html>
JavaScript-checkbox标签-隐藏、显示、全选、取消和反选等操作的更多相关文章
- html checkbox 实现全选/取消全选
html checkbox 实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...
- 【转载】checkbox实现全选/取消全选
比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...
- js实现checkbox的全选/取消
所有的操作都将使用jquery进行. 主要是为了实现指定内容的批量/单独删除操作. 先看一下页面的设计. 实现操作的主要地方是: 首先实现单击“标题”旁的checkbox实现所有条目的选择. 要点:j ...
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
- Android开发CheckBox控件，全选，反选，取消全选
在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" enc ...
- checkbox全选/取消全选
//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...
- 纯javascript实现选择框的全选与反选
HTML部分 <div id="wrap_input_box" > <input type="checkbox"><br> ...
- jQuery--checkbox全选/取消全选
用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...
- jquery 全选/取消全部
html /*主要按钮*/ <td><input type="checkbox" id="checkAllChange" /></ ...
随机推荐
- Linux dirname 和 basename
[参考文章]:Linux shell - `dirname $0` 定位到运行脚本的相对位置 [参考文章]:Linux命令之basename使用 1. dirname $0 获取脚本文件所在的目录信息 ...
- ionic3引用外部插件--百度地图及echart报表的使用
前言 ionic3提供的组件已经相当丰富咯,但是事实上有些特殊的需求,比如使用百度地图,或者第三方插件echart报表插件是,就不能用传统的方式去使用第三方插件咯,如何在Ionic3项目中使用第三方J ...
- 之前有面试到两个日期的大小比较方式，现在整理一下几种方法。 例子： String beginTime=new String("2017-06-09 10:22:22"); String endTime=new String("2017-05-08 11:22:22"); 1 直接用Date自带方法before()和after()比较 SimpleDateFormat d
各种数据类型(日期/时间.integer.floating point和numeric)转换成格式化的字符串以及反过来从格式化的字符串转换成指定的数据类型.下面列出了这些函数,它们都遵循一个公共的调用 ...
- React Native 日常报错
在学习React.js 或 React Native 过程中,有时看着别人的框架或代码,但总是会出现错误,因为React或之中用到的一些包经常更新,有些代码或教程就显得过旧了. 一.日常报错 'con ...
- 在AndroidStudio中使用单元测试
1. 前言 在Android开发中,如果对一个简单的功能,每次修改代码都重新运行到设备中进行测试,会浪费大量时间,降低开发工作效率.如果使用单元测试,编写单元测试类,执行测试单元测试类就可以对 ...
- delphi ADOCONNECTION异常拦截
elphi ADOCONNECTION错误拦截错误框标题: Debugger Exception Notification内容: Project KJXX.exe raised excepti ...
- ORACLE11G报错汇总
============安装类================= 安装Oracle 11g R2的过程中,在新建数据库实例时出现了该错误,如果选择"忽略"就会出现ora-28000 ...
- Pytorch-属性统计
引言 本篇介绍Pytorch属性统计的几种方式. 统计属性 求值或位置 norm mean sum prod max, min, argmin, argmax kthvalue, topk norm ...
- gdb调试caffe工程
环境:UBUNTU 16.04 CMake caffe 1.0.0-rc3 1.首先编译caffe为debug版本: 在caffe根目录下编辑CMakeFileList.txt,加入如下几行: SET ...
- JavaScript异步与Promise基本用法(resolve与reject)
Promise解决的问题相信每个前端都遇到过这样一个问题,当一个异步任务的执行需要依赖另一个异步任务的结果时,我们一般会将两个异步任务嵌套起来,这种情况发生一两次还可以忍,但是发生很多次之后,就形成了 ...