<!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. 数据库SQL SELECT查询的工作原理

    一般开发员只会应用SQL的四条经典语句:select,insert,delete,update.但是我从来没有研究过它们的工作原理,这篇我想说一说select在数据库中的工作原理. B/S架构中最经典 ...

  2. 洛谷P2670扫雷游戏题解

    题目 这道题是一个简单的模拟搜索题,可以把每个雷的位置都记作1. 这样就可记录出数字啦 #include<iostream> #include<cstring> using n ...

  3. Matplotlib学习---用matplotlib画雷达图（radar chart）

    雷达图常用于对多项指标的全面分析.例如:HR想要比较两个应聘者的综合素质,用雷达图分别画出来,就可以进行直观的比较. 用Matplotlib画雷达图需要使用极坐标体系,可点击此链接,查看对极坐标体系的 ...

  4. Hyper-V 配置虚拟网络

    Hyper-V功能异常强大,不了解的自行GG 本文介绍如何使用Hyper-V在本机建立虚拟网络,创建虚拟交换机 打开Hyper-V Manager,选择右边侧边栏的Virtual Switch Man ...

  5. 【刷题】LOJ 556 「Antileaf's Round」咱们去烧菜吧

    题目描述 你有 \(m\) 种物品,第 \(i\) 种物品的大小为 \(a_i\) ​,数量为 \(b_i\)​( \(b_i=0\) 表示有无限个). 你还有 \(n\) 个背包,体积分别为 \(1 ...

  6. HihoCoder 1511: 树的方差(prufer序)

    题意 对于一棵 \(n\) 个点的带标号无根树,设 \(d[i]\) 为点 \(i\) 的度数,定义一棵树的方差为数组 \(d[1..n]\) 的方差. 给定 \(n\) ,求所有带标号的 \(n\) ...

  7. 聊聊jvm的CompressedClassSpace

    序本文主要研究一下jvm的CompressedClassSpace CompressedClassSpacejava8移除了permanent generation,然后class metadata存 ...

  8. 使用Coverage进行代码覆盖率的测试

    软件测试实验报告 一.实验目的: 使用软件测试代码覆盖率. 二.实验工具: Windows10.Python3.6.3.Coverage. 三.实验内容: 1.编写准备测试的代码main.py和测试代 ...

  9. CF1131F Asya And Kittens（Kruskal重构树，启发式合并）

    这题难度1700,我感觉又小了…… 这题虽然没几个人是用kruskal重构树的思想做的,但是我是,所以我就放了个kruskal重构树的标签. 题目链接:CF原网 题目大意:有一个长为 $n$ 的排列, ...

  10. POJ1061 青蛙的约会（扩展欧几里得）

    题目链接:http://poj.org/problem?id=1061 青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submission ...