bootstrap实现checkbox全选、取消全选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <title>checkbox的全选和取消全选</title>
<script type="text/javascript">
//页面加载的时候,所有的复选框都是未选中的状态
function checkOrCancelAll(){
//1.获取checkbo的元素对象
var chElt=document.getElementById("chElt");
//2.获取选中状态
var checkedElt=chElt.checked;
console.log(checkedElt)
//3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消
var allCheck=document.getElementsByName("interest");
//4.循环遍历取出每一个复选框中的元素
//var mySpan=document.getElementById("mySpan");
if(checkedElt){
//全选
for(var i=0;i<allCheck.length;i++){
//设置复选框的选中状态
allCheck[i].checked=true;
}
//mySpan.innerHTML="取消全选";
}else{
//取消全选
for(var i=0;i<allCheck.length;i++){
allCheck[i].checked=false;
}
//mySpan.innerHTML="全选";
}
}
</script>
</head>
<body>
<div class="checkbox">
<label>
<input type="checkbox" id="chElt" onclick="checkOrCancelAll();"/><span id="mySpan">全选</span><br/>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="interest" value="study"/>学习
</label>
<label>
<input type="checkbox" name="interest" value="read"/>阅读
</label>
</div> <hr>
<h2>bootstrap示例</h2>
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form> </body>
</html>
bootstrap实现checkbox全选、取消全选的更多相关文章
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
- html checkbox 实现全选/取消全选
html checkbox 实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...
- checkbox全选/取消全选
//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...
- 【转载】checkbox实现全选/取消全选
比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...
- AngularJS--购物车全选/取消全选功能实现
刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...
- jQuery--checkbox全选/取消全选
用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- Vue 全选/取消全选，反选/取消反选
这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...
- vue实现功能 单选 取消单选 全选 取消全选
vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...
- jquery checkbox勾选取消勾选的诡异问题
jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form> 你爱好的运动是?<input type=&q ...
随机推荐
- kebab HDU - 2883（按时间段建点）
题意: 有n个人去撸串,每个人都能决定自己的串上有几块肉,每一块肉都要花费一个单位时间才熟,烤炉一次能烤m块肉 给出每个人的起始时间.终止时间.要几串.每个串上有几块肉,问能否满足所有的人 (啥?题不 ...
- 【XSY2534】【CF835D】Palindromic characteristics 回文自动机
题目大意 一个字符串\(s\)是\(1\)−回文串当且仅当这个串是回文串. 一个串\(s\)是\(k\)−回文串\((k>1)\)当且仅当\(s\)的前一半与后一半相同且\(s\)的前一 ...
- 微信开发使用webstorm&phpstrom 配置
材料: 下载链接:https://pan.baidu.com/s/1pLn6jFl 密码:fgo5 -----(将其中的wecharCode.jar 下载下来,然后在webStorm 的 File ...
- 网络文件系统(NFS)简介
网络文件系统(Network File System, NFS)是一种分布式文件系统协议,最初由Sun Microsystems公司开发,并于1984年发布.其功能旨在允许客户端主机可以像访问本地存储 ...
- Hdoj 1050.Moving Tables 题解
Problem Description The famous ACM (Advanced Computer Maker) Company has rented a floor of a buildin ...
- 搭建本地yum源并定时同步
在生产中内网的机器都是不能访问外网,所以需要搭建本地yum源.以中国科学科技大学的yum源为基准.http://mirrors.ustc.edu.cn/ 有些模块会同步失败,可以wget下载至指定位置 ...
- 【BZOJ3691】游行（网络流）
[BZOJ3691]游行(网络流) 题面 BZOJ 然而权限题. Description 每年春季,在某岛屿上都会举行游行活动. 在这个岛屿上有N个城市,M条连接着城市的有向道路. 你要安排英雄们的巡 ...
- Nowcoder | [题解-N210]牛客OI月赛2-提高组
比赛连接戳这里^_^ 我才不会说这是我出的题(逃) 周赛题解\((2018.10.14)\) \(T1\) \(25\sim50\)分做法\(:\)直接爆搜 作为一个良心仁慈又可爱的出题人当然\(T1 ...
- luogu3242 接水果 (整体二分+树状数组)
考虑整体二分,问题就变成了每个(水果)路径有多少个满足条件(权值)的(盘子)子路径 考虑一个盘子(a,b)表示两端点(不妨设dfn[a]<dfn[b]),那么他能接到的水果(u,v)一定满足(不 ...
- 2018"百度之星"程序设计大赛 - 资格赛hdu6349三原色（最小生成树）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6349 题目: 三原色图 Time Limit: 1500/1000 MS (Java/Others) ...