<!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. Super超级ERP系统---(10)订单打包

    订单拣货完成后,需要把订单装箱打包,并打印客户地址信息.订单打包的操作流程先是扫描订单号,然后扫描商品条码.  1.订单打包 打印包装箱面单 2.订单发货 订单打包完成后就等待发货,快递公司来拉货的时 ...

  2. 6) 十分钟学会android--Activity的生命周期之启动与销毁

    当用户导航.退出和返回您的应用时,应用中的 Activity 实例将在其生命周期中转换不同状态. 例如,当您的Activity初次开始时,它将出现在系统前台并接收用户焦点. 在这个过程中,Androi ...

  3. MIME类型记录

    Content-Disposition: attachment; filename="filename.xls" 提供下载

  4. Websphere 手动模拟删除应用操作

    Websphere  手动模拟删除应用操作 切记:不要在程序还在运行的时候,直接的remove掉应用程序,不然,会发生意外的错误.       最近,在项目中,不小心手动移除了正在运行的应用,发现se ...

  5. 优动漫PAINT核心功能介绍

    优动漫PAINT是一款功能强大的动漫绘图软件,适用于个人和专业团队创作,分为个人版和EX版.搭载了绘制漫画和插画所需的所有功能——丰富的笔工具.超强的笔压感应和手颤修正功能,可分别满足画师对于插画.漫 ...

  6. linux 性能分析与优化

    一.影响Linux服务器性能的因素 1.操作系统级 (CPU 内存 磁盘I/O性能 网络带宽) 2.程序应用级 二.系统性能评估标准   好  坏 极差 cpu user% +sys% <70% ...

  7. Nginx+Php-fpm运行原理

    一.代理与反向代理 现实生活中的例子 1.正向代理:访问google.com 如上图,因为google被墙,我们需要vpnFQ才能访问google.com. vpn对于“我们”来说,是可以感知到的(我 ...

  8. shell分析nginx日志

    以下脚本都是基于上面日志格式的,如果你的日志格式不同需要调整awk后面的参数. 分析日志中的UserAgent cat access_20130704.log | awk -F "\&quo ...

  9. Java JDK 1.7 和 JDK 1.8 新特性

    0 引言 本文主要介绍 Java JDK 中 1.7 和 1.8 的新特性. 1 JDK 1.7 新特性 1. switch可以接受String类型: public class Switch { pu ...

  10. python海龟的使用

    ############################螺旋正方形############################### import turtle turtle.left(90)for i ...