<!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. Android之Action Bar

    Action Bar在实际应用中,很好地为用户提供了导航,窗口位置标识,操作点击等功能.它出现于Android3.0(API 11)之后的版本中,在2.1之后的版本中也可以使用. 添加与隐藏Actio ...

  2. web拼图错误分析

    老师要求用web制作一个拼图游戏. 发现的问题:点击随机生成拼图的按钮后,打乱的图片会出现无法还原的情况. 发现过程:每次生成一个拼图后会测试它怎么拼回去,结果发现有时候拼不回去. 数学原理:如果两个 ...

  3. 电商物流仓储WMS业务流程

    电商物流仓储WMS业务流程 SKU是什么意思?  一文详解电商仓储管理中SKU的含义 从货品角度看,SKU是指单独一种商品,其货品属性已经被确定.只要货品属性有所不同,那么就是不同的SKU. PO信息 ...

  4. Python：Matplotlib 画曲线和柱状图（Code）

    原文链接:http://blog.csdn.net/ikerpeng/article/details/20523679 参考资料:http://matplotlib.org/gallery.html ...

  5. MFC多标签页对话框

    原文链接(有修改):http://blog.sina.com.cn/s/blog_6a1cdb3f0101llcw.html 1.新建一个MFC工程 取名PageSheet,选择Dialog base ...

  6. MySQL_视图/触发器/事务/存储过程/函数

    视图.触发器.事务.存储过程.函数 视图 视图是一个虚拟表(非真实存在),其本质是根据SQL语句获取动态的数据集,并为其命名,用户使用时只需使用名称即可获取结果集,可以将该结果集当作表来使用 #创建视 ...

  7. day27-1 numpy模块

    目录 numpy array 一维数组 二维数组(用的最多) np.array和list的区别 获取多维数组的行和列 多维数组的索引 高级功能 多维数组的元素替换 多维数组的合并 通过函数方法创建多维 ...

  8. 理解Faster-RCNN 中的Anchor

    先上图看一下Faster R-CNN操作流程:  图片说明:Faster R-CNN=Fast R-CNN+RPN,其中Fast R-CNN结构不变:RPN负责生成proposals,配合最后一层的f ...

  9. Java Mybatis 缓存介绍

    0 引言 本文主要介绍有关MyBatis的缓存. 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 1. 一级缓存: 基于PerpetualCache 的 HashMap本 ...

  10. [2] day 02

    1. df.memory_usage()将返回每列占用多少 要包含索引,请传递index=True所以要获得整体内存消耗: 2. numpy.iinfo 3. shift函数 https://blog ...