全选或者单选checkbox的值动态添加到div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="./css/bootstrap.css" />
<style>
html,body{
width:100%
}
.bg_gray{
background-color: #F1F1F1;
font-size:14px;
height:28px;
line-height: 28px;
}
.container{
width:500px;
border: 1px solid #000;
}
.lead{
border: 1px solid #f1f1f1;
height:40px;
margin-top:10px;
}
.breadcrumb{
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row bg_gray">
<div class="col-xs-6">
选择部门
</div>
<div class="col-xs-6 text-right">×</div>
</div>
<p class="lead">
</p>
<div class="row">
<ol class="breadcrumb">
<li><a href="#">华东师范大学>经管学部</a></li>
</ol>
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-xs-6">
<input type="checkbox" name="check_all" />全选
</div>
<div class="col-xs-6 text-right">
5>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-5 col-xs-offset-1">
<input type="checkbox" name="check" onclick="getCheck()"/>经济学院
</div>
<div class="col-xs-6 text-right">
5>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-5 col-xs-offset-1">
<input type="checkbox" name="check" onclick="getCheck()"/>MBA教育学院
</div>
<div class="col-xs-6 text-right">
5>
</div>
</li>
</ul>
<div class="row">
<div class="col-xs-6 text-center">
<button class="btn btn-default btn-lg">取消</button>
</div>
<div class="col-xs-6 text-center">
<button class="btn btn-info btn-lg">确定</button>
</div>
</div>
</div>
</body>
<script src="js/jquery.js"></script>
<script>
$("[name=check]").on("change",function(){
var vl = $.trim($(this).parent().text())
var val = $('<button type="button" class="btn btn-info btn-sm">'+vl+'</button>')
if($(this).is(":checked")){
if($("button:contains("+vl+")").length==0){
$(".lead").append(val)
}
}else{
$("button:contains("+vl+")").remove()
}
})
$("[name=check_all]").on("change",function(){
if($(this).is(":checked")){
$.map($("[name=check]"),function(val,index){
$(val).attr("checked","checked")
$("[name=check]").eq(index).trigger("change")
})
}else{
$.map($("[name=check]"),function(val,index){
$(val).removeAttr("checked")
$("[name=check]").eq(index).trigger("change")
})
}
})
function getCheck(){
var flag=1;
$.map($("[name=check]"),function(val,index){
if(!$(val).is(":checked")){
flag=0;
}
})
if(!flag){
$("[name=check_all]").removeAttr("checked")
}else{
$("[name=check_all]").attr("checked","checked")
}
}
</script>
</html>
原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
文末福利：关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群
全选或者单选checkbox的值动态添加到div的更多相关文章
- JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- input全选与单选(把相应的value放入隐藏域去)
框架是Jquery 需求是: 页面上有很多复选框,1.当我选择一项复选框时候 把对应的值放入到隐藏域去 2.当我反选的时候 把隐藏域对应的值删掉.3.当我全选的时候 页面上所有的选择框的值一起放到隐藏 ...
- jq pagination分页 全选、单选的思考
$().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...
- Jquery全选与反选checkbox（代码示例）
今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...
- 优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo
提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子: 1 源代码: h5 // 全选框 <input type=& ...
- DataTable添加checkbox实现表格数据全选，单选（点选）
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax ...
- jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效
好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...
- 微信小程序获取复选框全选，反选选中的值
wxml文件 <view class="tr"> <view class="th"> <checkbox bindtap=&quo ...
- vue分页全选和单选操作
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> ul,li ...
随机推荐
- 洛谷 P1732 [TJOI2011]序列
P1732 [TJOI2011]序列 题目描述 一指数列A={a1, a2, …, an},根据数列A计算数列B={b1, b2, …, bn},其中: 求\sum\limits^n_{i=1} b_ ...
- 120.VS调试技巧
设置断点调试 在一行代码的左侧点击即可设置断点,按F5(调试->开始调试)即可运行到第一个端点处暂停 逐语句调试 按F11(调试->逐语句)即可开始一步一步执行 逐过程调试 按F10(调试 ...
- Kinect 开发 —— ColorBasic
创建一个Kincet项目通常需要: 1. 创建一个VS项目,一般为了展示通常创建一个wpf项目. 2. 添加Microsoft.Kinect.dll引用,如果是早期版本的SDK,这个名称可能不同. 3 ...
- 使用Java语言开发微信公众平台(六)——获取access_token
在前四期的文章中,我们分别学习了“环境搭建与开发接入”.“文本消息的接收与响应”.“被关注回复与关键词回复”.“图文消息的发送与响应”等环节.那么,从本篇博文开始,我们将进去更高级的 ...
- pgrep---以名称为依据从运行进程队列中查找进程
pgrep命令以名称为依据从运行进程队列中查找进程,并显示查找到的进程id.每一个进程ID以一个十进制数表示,通过一个分割字符串和下一个ID分开,默认的分割字符串是一个新行.对于每个属性选项,用户可以 ...
- linux新安装后root密码设置
linux在安装过程中未设置root密码 导致在使用中无法su 解决方法是设置root密码: 输入: sudo passwd root [sudo] password for you: ---> ...
- ORA-01653 无法在表空间扩展的解决办法 -- 增加表空间大小或给表空间增加数据文件
转自原文 ORA-01653 无法在表空间扩展的解决办法 -- 增加表空间大小或给表空间增加数据文件 当前系统的数据量越来越大的,昨天还运行正常的数据库,突然无法使用了.经过定位发现是"OR ...
- Javascript：存储和读取cookie
Cookie是网页开发中的一项重要技术,用于在本地存储一些信息(如username,password.登录状态)以便用户下一次訪问时使用(或在其他页面使用). cookie的格式是键值对,多个键值对之 ...
- 洛谷P1622 释放囚犯
题目描述 Caima王国中有一个奇怪的监狱,这个监狱一共有P个牢房,这些牢房一字排开,第i个紧挨着第i+1个(最后一个除外).现在正好牢房是满的. 上级下发了一个释放名单,要求每天释放名单上的一个人. ...
- Shelled-out Commands In Golang
http://nathanleclaire.com/blog/2014/12/29/shelled-out-commands-in-golang/ Shelled-out Commands In Go ...