全选或者单选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 ...
随机推荐
- hdu1856 More is better （并查集）
More is better Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 327680/102400 K (Java/Others) ...
- WIN10 10招
还有不到两个月的时间,7 月 29 日 Windows 10 就将正式公布,在此之前已经有不少的用户已经使用上了 Windows 10 的预览版.对于那些苦等 Windows 10 的用户来说,幸福非 ...
- php实现简单算法3
php实现简单算法3 这篇文章主要介绍了PHP经典算法集锦,整理了各种常见的算法,包括排序.查找.遍历.运算等各种常见算法原理与实现技巧,需要的朋友可以参考下 1.首先来画个菱形玩玩,很多人学C时在书 ...
- JNDI学习总结（4）——Tomcat下使用Druid配置JNDI数据源
com.alibaba.druid.pool.DruidDataSourceFactory实现了javax.naming.spi.ObjectFactory,可以作为JNDI数据源来配置. 一.下载D ...
- 洛谷——P1843 奶牛晒衣服
https://www.luogu.org/problem/show?pid=1843#sub 题目背景 熊大妈决定给每个牛宝宝都穿上可爱的婴儿装 . 于是 , 为牛宝宝洗晒衣 服就成了很不爽的事情. ...
- Makefile 文件格式
Makefile包含 目标文件.依赖文件.可运行命令三部分. 每部分的基本格式例如以下: test: prog.o code.o gcc -o test prog.o code.o 当中 ...
- java产生随机数的三种方式
转自:https://blog.csdn.net/YTTmiao/article/details/78187448 随机数在实际中使用很广泛,比如要随即生成一个固定长度的字符串.数字.或者随即生成一个 ...
- Linux平台下使用AdventNet ManageEngine OpUtils监控网络
AdventNet ManageEngine OpUtils 是一套系统和网络监视工具,它有Linux/Windows系统平台的免费版和企业版,该软件是一款用于监视诸如路由器,交换机,服务器或者桌面这 ...
- JS/CSS 各种操作信息提示效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- cf1051F. The Shortest Statement（最短路/dfs树）
You are given a weighed undirected connected graph, consisting of nn vertices and mm edges. You shou ...