<!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. P1319 压缩技术

    很多小伙伴卡在此题的原因可能是因为不知道怎么让它输入无限个数字吧?除了用string,在这里我是看到“压缩码保证 N * N=交替的各位数之和”这一句话,想到用while循环.只要输入的数的总和t小于 ...

  2. Verilog定义计算位宽的函数clogb2

    在很多情况下要计算输入输出的位宽,比如你写一个8*8的ram,那么地址需要三位去表示,那么这个函数的方便就体现出来了,你需要使用函数定义就好了,如果对于多文件可以包含定义的文件: 如果你的DEPTH是 ...

  3. 【BZOJ2333】【SCOI2011】棘手的操作 treap合并

    题目大意 有\(n\)个节点,标号从1到\(n\),这\(n\)个节点一开始相互不连通.第\(i\)个节点的初始权值为\(a_i\),接下来有如下一些操作: \(U~x~y\):加一条边,连接第\(x ...

  4. 【BZOJ1565】【NOI2009】植物大战僵尸 网络流 最大权闭合子图

    题目大意 ​ 给你一个\(n\times m\)的地图,每个格子上都有一颗植物,有的植物能保护其他植物.僵尸从右往左进攻,每吃掉一颗植物就可以得到\(a_{i,j}\)的收益(\(a_{i,j}\)可 ...

  5. HNOI2019 退役记

    窗外风雨大作. 凌晨两点又被噩梦惊醒,朦胧中看见书桌的灯还亮着. 走近书桌,有一个人正在敲打着键盘,屏幕上是一些似曾相识的东西. 被水浸湿的头发随意地搭在额头上,鼻梁上架着一副眼镜,镜片上全是小水珠, ...

  6. 做事从来不坚持的我又开始学习PyQt了。。。。。。

    链接附上,不再更新:PyQt5图形界面编程 第一部分 第一个程序 # -*- coding: utf-8 -*- import sys from PyQt5.QtWidgets import QApp ...

  7. HR_Minimum Swaps 2

    源代码超时 看了评论区改用了字典序列. #!/bin/python3 import math import os import random import re import sys # Comple ...

  8. JIRA和Confluence更改JVM内存大小解决访问打开缓慢问题

    原因: 根据主机物理内存不同,默认的java虚拟机内存也会不同(一个较低值),有时候不够用,可以修改默认设置,改善内存不足导致的问题. 操作步骤: JIRA 1. 打开至相应目录: ~]# cd  / ...

  9. Nginx反向代理后端多节点下故障节点的排除思路

    仔细想来,其实是个非常简单的问题:开发和运维觉得两个后端节点跑起来压力太大了,就扩充了两个新的后端节点上去,这一加就出问题了,访问时页面间歇性丢失,这尼玛什么情况...想了半天没思路,查了Nginx的 ...

  10. @transactional注解在什么情况下会失效，为什么。

    @transactional注解在什么情况下会失效,为什么. @Transactional的使用: @Transactional public void updateUserAndAccount(St ...