全选或者单选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 ...
随机推荐
- ArcGIS 空间查询一例
ISpatialFilter spatialFilter = new SpatialFilterClass(); spatialFilter.Geometry = Polygon ;//设置用于筛选几 ...
- 《linux 内核全然剖析》编译linux 0.12 内核 Ubuntu 64bits 环境
我×.. . 最终好了,大概3 4个小时吧...各种毛刺问题.终究还是闯过来了.. .. ubuntu2@ubuntu:~/Downloads/linux-0.00-050613/linux-0.00 ...
- You have ettempted to queue to many files.You may select one files.
<script type="text/javascript" src="/script/swfupload/swfupload.js"></s ...
- 在resin配置參数实现JConsole远程监控JVM
在Resin配置參数实现JConsole远程监控JVM 在Resin中配置中配置下列參数,就能够是实现了! <jvm-arg>-Dcom.sun.management.jmxremote& ...
- NYOJ 203 三国志(Dijkstra+贪心)
三国志 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描写叙述 <三国志>是一款非常经典的经营策略类游戏.我们的小白同学是这款游戏的忠实玩家.如今他把游戏简化一下 ...
- POJ 2981 Strange Way to Express Integers 模线性方程组
http://poj.org/problem?id=2891 结果看了半天还是没懂那个模的含义...懂了我再补充... 其他的思路都在注释里 /********************* Templa ...
- mysql存储emoji表情报错处理，qq互联mysql存储昵称中带表情的数据时报错。
前言 做qq互联登录时发现一个问题,如果qq昵称中有表情时存入mysql数据库会报错. java.sql.SQLException: Incorrect string value: "ð&q ...
- 初学h5须知
9.41.浏览器是页面的环境(类似水是鱼的环境)2.浏览器结构:title 标题,题目 URL 网址 ...
- 欧拉回路&欧拉路径学习笔记
基础性质(用来判定): 1.无向图欧拉回路没有奇数点 (有向图所有点入度等于出度) 2.无向图欧拉路径只有两个奇数点 (有向图有一个顶点入度比出度大1,有一个顶点出度比入度大1,其他的全相等) 3.图 ...
- ssh-agent && 及 ssh-add介绍
ssh-agent命令是一种控制用来保存公钥身份验证所使用的私钥的程序.ssh-agent在X会话或登录会话之初启动,所有其他窗口或程序则以客户端程序的身份启动并加入到ssh-agent程序中.通过使 ...