<!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全选、取消全选的更多相关文章

  1. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  2. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  3. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  4. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  5. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  6. jQuery--checkbox全选/取消全选

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...

  7. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  8. Vue 全选/取消全选，反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  9. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  10. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

随机推荐

  1. SpringBoot整合ssm

    1.创建工程 使用idea可以快速创建SpringBoot的工程 这里选择常用的类库,SpringBoot将各种框架类库都进行了封装,可以减少pom文件中的引用配置: 比如Spring和Mybatis ...

  2. 【XSY2786】Mythological VI 数学

    题目描述 有\(1\sim n\)一共\(n\)个数.保证\(n\)为偶数. 你要把这\(2n\)个数两两配对,一共配成\(n\)对.每一对的权值是他们两个数的和. 你想要知道这\(n\)对里最大的权 ...

  3. thymeleaf中js跳转到另外一个页面

    <script type="text/javascript"> setTimeout("location.href='index'", 3000); ...

  4. JeeSite4.x 搭建并部署到服务器

    1.下载地址:https://gitee.com/thinkgem/jeesite4 2.文档地址:http://jeesite4.mydoc.io/?t=267354 2.1一定要看,都很清晰,没废 ...

  5. 【BZOJ5294】[BJOI2018]二进制（线段树）

    [BZOJ5294][BJOI2018]二进制(线段树) 题面 BZOJ 洛谷 题解 二进制串在模\(3\)意义下,每一位代表的余数显然是\(121212\)这样子交替出现的. 其实换种方法看,就是\ ...

  6. 「HAOI2018」染色 解题报告

    「HAOI2018」染色 是个套路题.. 考虑容斥 则恰好为\(k\)个颜色恰好为\(c\)次的贡献为 \[ \binom{m}{k}\sum_{i\ge k}(-1)^{i-k}\binom{m-k ...

  7. Nginx代理MysqlCluster集群

    -------Nginx代理MysqlCluster 公司有一个公网ip,有公网ip(222.222.222.222)那台服务器上装的nginx,mysql装在公司另外一台服务器上假设ip为192.1 ...

  8. luogu P4299 首都

    题目描述 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打败了B国,那么B国将永远从这个星球消失, ...

  9. [SCOI2010]幸运数字（容斥+爆搜）

    在中国,很多人都把6和8视为是幸运数字!lxhgww也这样认为,于是他定义自己的“幸运号码”是十进制表示中只包含数字6和8的那些号码,比如68,666,888都是“幸运号码”!但是这种“幸运号码”总是 ...

  10. docker镜像操作

    1.获取镜像 docker pull NAME[:TAG] 如果不显式地指定TAG,则默认会选择latest标签,即下载仓库中最新版本的镜像.//获取最新镜像docker pull ubuntu // ...