全选或者单选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 ...
随机推荐
- UIWebView 无缝切换到 WKWebView
WKWebView 是IOS8新增的 Web浏览视图 长处: 载入速度 比UIWebView提升差点儿相同一倍的, 内存使用上面,反而还少了一半. 缺点: WKWebView 不支持缓存 和 ...
- ORA-4031错误 解决方法
遇到ORA-4031错误时.你的心里会不会发怵?ORA-4031非常easy导致数据库出现异常崩溃,当Oracle的核心进程无法获得共享池内存时.它们会把数据库异常宕掉.当然,ORA-4031就像黄灯 ...
- css3中关于伪类的使用
目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时.常常会遇到在每个li后面加入一个切割符号,到最后一个元素的时候,切割符就会去掉的一种效果 ...
- Onvif开发之代码框架生成篇
看了前一篇的ONVIF的简单介绍应该对它的基本使用都有了一些基本的了解了吧!下面我讲一步分解向大家介绍下如何通过gsoap生成需要的代码,以及代码中需要注意的问题[基于Linux平台 C开发] 生成O ...
- 38.C语言字符串总结
1.自己实现三个常用函数 strlen,strcpy,strstr 自己实现strstr函数,如果找到返回首地址,找不到则返回NULL //查找元素,返回首地址 char *mystrstr(cons ...
- uva 11248 最小割
Dinic 1 #include<iostream> #include<string> #include<algorithm> #include<cstdli ...
- vuejs模板中使用html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Mybatis 一对多 多对1
http://blog.csdn.net/z69183787/article/details/46833565 http://blog.csdn.net/rain097790/article/deta ...
- [TypeScript] Shallow copy object by using spread opreator
For example we have an object: const todo = { text: "Water the flowers", completed: false, ...
- [Angular & Unit Testing] Testing a RouterOutlet component
The way to test router componet needs a little bit setup, first we need to create a "router-stu ...