<!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黑科技系列——破解游戏之修改金币数

    我们在玩游戏的时候总是会遇到一些东东需要进行购买的,但是我们可能又舍不得花钱,那么我们该怎么办呢?那就是用游戏外挂吧!我们这里说的是Android中的游戏,在网上搜索一下移动端游戏外挂,可能会找到一款 ...

  2. 在线场景感知:图像稀疏表示—ScSPM和LLC总结(以及lasso族、岭回归)

    前言: 场景感知其实不分三维场景和二维场景,可以使用通用的方法,不同之处在于数据的形式,以及导致前期特征提取及后期在线场景分割过程.场景感知即是场景语义分析问题,即分析场景中物体的特征组合与相应场景的 ...

  3. 杭电2061WA

    #include<stdio.h> struct mem { char s[50]; int c; int f; }; int main() { struct mem x[60]; int ...

  4. css 添加阴影

    添加阴影,分为内阴影和外阴影. inset:内阴影. 不写默认外阴影. box-shadow: 水平位移  垂直位移  模糊半径 #box-shadow{ -moz-box-shadow:5px 5p ...

  5. 使用序列号激活优动漫PAINT(附激活码)

    优动漫PAINT是一款功能强大的动漫绘图软件,简单的中文界面和丰富的笔刷操纵,再次为设计工作者带来非一般的感受!最近,有不少小伙伴提出这样的疑问:购买安装优动漫PAINT之后,不知道如何激活,在哪里输 ...

  6. 网站顶部显示预加载进度条preload.js

    网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...

  7. 路飞学城Python-Day182

    Evernote Export 集群介绍 1.集群介绍 集群:将多个物理机器组成一个逻辑计算机,实现负载和容错 计算机集群简称集群,是一种计算机系统,它通过一组松散集成的计算机软件或硬件连接起来高度紧 ...

  8. 【Git教程】Git教程及使用命令

      Git是目前世界上最先进的分布式版本控制系统,可以自动记录和管理文件的改动,还可以团队写作编辑,也就是帮助我们对不同的版本进行控制.2008年,GitHub网站上线,为开源项目提供免费存储,迅速发 ...

  9. reMarkable安装教程

    PS :每次都下一遍安装包挺无奈的...... 系统版本 :Ubuntu 16.04 安装包 :remarkable_1.87_all.deb 链接 Here!-> reMarkable 安装步 ...

  10. java基础口述

    1:什么是变量?变量的定义格式?要使用变量需要注意什么? 在程序运行过程中,其值是可以在某个范围内发生改变的量. 变量其实就是内存中一小块区域. 由3部分组成: 1,数据类型: 限定变量的取值 2,变 ...