<!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. Mysql 千万级别数据数据查询

    1.构建数据 --创建MyISAM模式表方便批量跑数据 CREATE TABLE `logs1` ( `id` int(11) NOT NULL AUTO_INCREMENT, `logtype` v ...

  2. 接口压测初识java GC

    1.先用Spring Boot 搭建 web 服务,构建api 服务 @RequestMapping("/index") @ResponseBody public String i ...

  3. 【AGC002F】Leftmost Ball DP 数学

    题目大意 有\(n\)种颜色的球,每种\(m\)个.现在zjt把这\(nm\)个球排成一排,然后把每种颜色的最左边的球染成第\(n+1\)种颜色.求最终的颜色序列有多少种,对\(1000000007\ ...

  4. module_loader.py

    # few functions that make it possible to import functions # from jupyter notebooks as from modules; ...

  5. Glad You Came hdu-6356（ST表 || 线段树）

    第一种用线段树,用两颗数维护区间最大值和区间的最小值,然后更新的时候如果我目前区间内的最大值比我得到的v小,那么我就把这个区间修改成v,如果我的最小值比v大,那么v就是没有用的,直接跳过,然后这样每次 ...

  6. eureka集群基于DNS配置方式

    https://www.cnblogs.com/relinson/p/eureka_ha_use_dns.html   最近在研究spring cloud eureka集群配置的时候碰到问题:多台eu ...

  7. 纪中2018暑假培训day1提高b组改题记录

    收到意见,认为每天的程序和随笔放在一起写的博客太长了,于是分开整理 day1 模拟赛,看了看提高a组t1的样例就不太想写,于是转而写b组 t1: Description 给定一个n个点m条边的有向图, ...

  8. CF1080F Katya and Segments Sets

    题意:给定n个区间,每个区间有颜色.m次询问,每次询问:这n个区间中所有被包含在[x, y]这一区间中的区间,它们的颜色是否取遍了[l, r]中的所有颜色. 强制在线. 解:第一步是大家都熟悉的套路⑧ ...

  9. Java 读数据库字段时发现的一个现象

    早上发现有一个网名叫“帅!是不需要理由”的一个人,在后台只能看到“帅!是不需要理”,“由”字就是不显示出来. 经过分析发现,在Access数据库中,name这个字段的长度是15,因为我知道Access ...

  10. Vue+Django2.0 restframework打造前后端分离的生鲜电商项目（2）

    1.restful api介绍 1.前后端分离的优缺点 1.为什么要用前后端分离 1.pc.app.pad多端适应 2.SPA(单页面应用)开发模式开始流行 3.前后端分离职责不清 4.开发效率问题, ...