<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
 
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" charset="utf-8"/>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="checkbox" id="one" value="1" onClick="checkBox(this);"/><label for="">1</label><br />
<input type="checkbox" id="two" value="2" onClick="checkBox(this);"/><label for="">2</label><br />
<input type="checkbox" id="three" value="3" onClick="checkBox(this);"/><label for="">3</label><br />
<input type="checkbox" id="four" value="4" onClick="checkBox(this);"/><label for="">4</label><br />
<div id="content-area"></div><br />
 
</body>
<script type="text/javascript">
//the main function
function checkBox(obj) {
var this_area = document.getElementById("content-area");
this_id = obj.id;
this_unit = document.getElementById(this_id);
this_value = obj.value;
var realTime_area = "";
 
console.info(typeof this_value)
 
var Input_value = ['1', '2', '3', '4',]
console.info(this_unit.checked)
console.info(this_id)
if (this_unit.checked) {
var para = document.createElement("div");
para.style.display = "inline-block";
if (Input_value.indexOf(this_value) >= 0 && this_value !== '2') {
area = '<div style="width:30px;height:30px;background: pink" id="' + this_id + "1" + '"></div><lable>' + this_value + '</lable>'
para.innerHTML = area;
this_area.appendChild(para);
} else if (this_value === "2") {
console.info("----------2")
area = '<div style="width:30px;height:30px;background: green" id="' + this_id + "1" + '"></div><lable>' + this_value + '</lable>'
para.innerHTML = area;
this_area.appendChild(para);
}
}else{
real_this_id = this_id + "1";
real_this1 = document.getElementById(real_this_id);
$("#" + real_this_id).parent().remove();
}
}
</script>
</html>

checkbox改写的更多相关文章

  1. 重写Checkbox 改写选择框的大小

    /* 作者:Starts_2000 * 日期:2009-07-30 * 网站:http://www.csharpwin.com CS 程序员之窗. * 你可以免费使用或修改以下代码,但请保留版权信息. ...

  2. iview checkbox demo（文档改写）

    <template> <div class="content"> <div style="border-bottom: 1px solid ...

  3. html自定义checkbox、radio、select —— select篇

    上一篇<html自定义checkbox.radio.select —— checkbox.radio篇>介绍了我们是怎么将 html 自带的 checkbox.radio 改成我们自定义的 ...

  4. html自定义checkbox、radio、select —— checkbox、radio篇

    前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...

  5. 『转』credential Provider 简易改写攻略

    本次小学期的题目是windows下的凭证改编.本人负责的是Win7 下的credentials Provider 的编写以及其他杂七杂八的工作.当然给我印象最深的就是credentials provi ...

  6. WPF CheckBox 样式

    <Style x:Key="FocusVisual"> <Setter Property="Control.Template"> < ...

  7. 计算Div标签内Checkbox个数或已被disabled的个数

    先看下面的html: 计算div内的checkbox个数:$('#divmod input[type="checkbox"]').length 计算div内checkbox被dis ...

  8. 为Xamarin更好的开发而改写的库

    欢迎大家加入以下开源社区 Xamarin-Cn:https://github.com/Xamarin-Cn Mvvmcross-Cn:https://github.com/Mvvmcross-Cn  ...

  9. 前端开发：css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

    前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...

随机推荐

  1. redis启动加载过程、数据持久化

    背景 公司一年的部分业务数据放在redis服务器上,但数据量比较大,单纯的string类型数据一年就将近32G,而且是经过压缩后的. 所以我在想能否通过获取string数据的时间改为保存list数据类 ...

  2. webpack入门 --初级压缩

    1.新建一个文件夹,再初始化npm: npm init 2.安装webpack,首先要全局安装,再本地安装: npm install webpack -g // 全局安装 npm install we ...

  3. 关于KO信息

    最近写大论文查到KO也是可以用于分类的一种信息. 如何使用KEGG进行通路富集http://blog.sciencenet.cn/blog-364884-779116.html kegg 数据库学习笔 ...

  4. （转载） popupWindow 指定位置上的显示

    popupWindow 指定位置上的显示 标签: androidpopupWindowpopupWindow具体位置放置 2014-07-09 16:23 1114人阅读 评论(0) 收藏 举报  分 ...

  5. 使用光盘作为yum源安装ifconfig等网络命令

    # mkdir -p /mnt/cdrom# 如果是光驱:mount -t iso9660 /dev/cdrom /mnt/cdrom/# 如果是ISO:mount -o loop /usr/loca ...

  6. 安装oracle执行runInstaller文件时报错：“……/install/.oui:Permission denied”

    一:问题描述 二:出错原因 将windows下未解压的Oracle安装软件上传到了linux服务器,导致有三个文件的执行权限丢失. 三:解决方法 为其赋予相应权限即可. 1: [root@MyPc ~ ...

  7. Day 13迭代器生成器

    迭代器 1.迭代器就是迭代的工具,迭代也可以说成是重复,并且每一次重复都是基于上一次的结果而来的,在python中一切皆对象. 2.可迭代对象:只要拥有__iter__方法的对象都是可迭代对象. 3. ...

  8. Express 初步使用

    Express express 是 node 中最流行的框架之一. 1. 起步 安装: npm install express --save hello world const express = r ...

  9. 训练1-B

    杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别的士司机和乘客的心理障碍 ...

  10. python 协程 greenlet gevent

    一.并发的本质 切换+保存状态 cpu正在运行一个任务,会在两种情况下切走去执行其他的任务(切换由操作系统强制控制),一种情况是该任务发生了阻塞,另外一种情况是该任务计算的时间过长时间片到了 二.协程 ...