<!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. Cetos 7 防火墙设置

    1.关闭防火墙: # systemctl stop firewalld.service 2.开启防火墙: # systemctl start firewalld.service 3.关闭开机启动: # ...

  2. 基于FPGA的数字秒表（数码管显示模块和按键消抖）实现

    本文主要是学习按键消抖和数码管动态显示,秒表显示什么的,个人认为,拿FPGA做秒表真是嫌钱多. 感谢 感谢学校和至芯科技,笔者专业最近去北京至芯科技培训交流了一周.老师的经验还是可以的,优化了自己的代 ...

  3. 【BZOJ1004】【HNOI2008】Cards 群论 置换 burnside引理 背包DP

    题目描述 有\(n\)张卡牌,要求你给这些卡牌染上RGB三种颜色,\(r\)张红色,\(g\)张绿色,\(b\)张蓝色. 还有\(m\)种洗牌方法,每种洗牌方法是一种置换.保证任意多次洗牌都可用这\( ...

  4. bzoj 2733 : [HNOI2012]永无乡 (线段树合并）

    Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...

  5. mac上安装ta-lib

    Now I am ready to start installing TA-Lib. Generally I followed the steps listed in here. 1. Install ...

  6. emwin之自绘制 BUTTON 图形的一些问题

    @2018-11-8 [小记] [需求] 官方只提供圆角矩形图形,其他图形及颜色需求则要自己实现 [注意] 通过回调函数自实现的图形绘制存在该回调函数一直被调用的现象,而非像窗口回调函数中 BUTTO ...

  7. 「JLOI2015」骗我呢 解题报告？

    「JLOI2015」骗我呢 这什么神仙题 \[\color{purple}{Link}\] 可以学到的东西 对越过直线的东西翻折进行容斥 之类的..吧? Code: #include <cstd ...

  8. [HAOI2010]最长公共子序列（LCS+dp计数）

    字符序列的子序列是指从给定字符序列中随意地(不一定连续)去掉若干个字符(可能一个也不去掉)后所形成的字符序列.令给定的字符序列X=“x0,x1,…,xm-1”,序列Y=“y0,y1,…,yk-1”是X ...

  9. 临时处理小记：把Numpy的narray二进制文件转换成json文件

    临时处理一个Numpy的二进制文件,分析知道里面是dict类型,简单小记一下,如果Numpy和Python基础不熟悉可以看我之前写的文章 In [1]: %%time import numpy as ...

  10. poj2689 Prime Distance

    题意:求[a, b]之间差最大/小的相邻素数. 0 < a, b < 2^32, 0 < b - a <= 1e6 首先发现a,b很大,以至于无法求出素数来. 然后就考虑退而求 ...