全选或者单选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 ...
随机推荐
- HDU 3714 Error Curves
Error Curves 思路:这个题的思路和上一个题的思路一样,但是这个题目卡精度,要在计算时,卡到1e-9. #include<cstdio> #include<cstring& ...
- 构建基于Javascript的移动CMS——加入滑动
在和几个有兴趣做移动CMS的小伙伴讨论了一番之后,我们认为当前比較重要的便是统一一下RESTful API.然而近期持续断网中,又遭遇了一次停电,暂停了对API的思考.在周末无聊的时光了看了<人 ...
- smarty课程---最最最简单的smarty例子
smarty课程---最最最简单的smarty例子 一.总结 一句话总结:其实所有的模板引擎的工作原理是差不多的,无非就是在php程序里面用正则匹配将模板里面的标签替换为php代码从而将两者混合为一个 ...
- js简易留言板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- C# WPF开源控件库MaterialDesign介绍
介绍 1.由于前端时间萌发开发一个基础架构得WPF框架得想法, 然后考虑到一些界面层元素统一, 然后就无意间在GitHub上发现一个开源WPF UI, 于是下载下来了感觉不错. 官网地址:http:/ ...
- 摆脱技术思维，转向产品思维——寻找“万能”IDC的苦恼
背景:近期在新产品的开发任务完毕后一直在为寻找好的IDC和优质的托管服务忙碌.需求源自于我们重点要解决之前老版产品面临的国内外用户訪问速度慢甚至连接不上的问题. 除去架构技术上使用高性能.可扩展的方案 ...
- 微软自拍应用iOS版公布
微软自拍(Microsoft Selfie)主要是支持自拍后还能加强自拍效果的功能. 只是和其它自拍应用不同的是.Microsoft Selfie 利用了机器学习来增强照片,应用会"考虑年龄 ...
- inflater-布局转化实现
通俗的说,inflate就相当于将一个xml中定义的布局找出来.因为在一个Activity里如果直接用findViewById()的话,对应的是setConentView()的那个layout里的组件 ...
- NOPI 锁定Excel单元格不让编辑的方法
简介:原生态纯JavaScript 100大技巧大收集---你值得拥有 http://www.cnblogs.com/xl900912/p/4223629.html 从博客园上看都的关于JS的一些常见 ...
- gomail发送附件
采用github.com/go-gomail/gomail/ 的邮件功能,可以发送附件 以及html文档,下面是其给出的demo,测试通过. package main //cmd: go get go ...