HTML:

<div class="msg_editUrl_function">
<label class="labelChecked" for="url_checkbox">
<input type="checkbox" class="url_checkbox" name="source_url_checked" id="url_checkbox">

<span class="lbl_content"> 原文链接</span>
</label>
<div class="url_input_div" >
<input type="text" class="url_input" name="source_url">
</div>
</div>

CSS:

.msg_editUrl_function {
padding-top: 20px;
margin: 0 90px 10px 0;
border-bottom: 1px solid #e7e7eb;

}

.labelChecked {
position: relative;
width: 90px;
height: 30px;
display: block;
}

.url_checkbox {
box-sizing: border-box;
padding: 0;
width: 18px;
height: 18px;
position: absolute;
}

.lbl_content {
display: inline-block;
position: absolute;
width: 60px;
height: 20px;
left: 30px;
bottom: 10px;
}

.url_input {
background-color: transparent;
border: 0;
outline: 0;
width: 100%;
height: 100%;
}

.url_input_div {
margin-left: 1.7em;
width: 508px;
position: relative;
height: 30px;
line-height: 30px;
vertical-align: middle;
font-size: 14px;
padding: 0 10px;
border: 1px solid #e7e7eb;
box-shadow: none;
-webkit-box-shadow: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
background-color: #fff;
margin-bottom: 20px;
display:none;

}

JS:

$(".url_checkbox").change(function(){
if($(".url_checkbox").prop("checked")){
$(".url_input_div").css("display","block");

}else{
$(".url_input_div").css("display","none");
}
})

checkbox点击后出现div的更多相关文章

  1. checkbox美化;给div加上checked属性

    DIV的背景图修改 $("#isOpenmibao").css("backgroundImage", " url('../images/checkbo ...

  2. 实现点击后创建div,若对div2秒无操作则将div隐藏,鼠标移上div让它不隐藏,移出div超过两秒则div隐藏

    $('.addLabel').on('click', function () { setTimeout(function(){ if(hoverflag==0){ $(".labelHide ...

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

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

  4. 实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能

    度娘了很多帖子,只说三种状态要用图片替换来做,但没找到有用的例子,被逼自己写了一个 三方控件肯定是很多的,如jstree,可以直接用 由于公司的UDS限制,不能上传图片,只能文字说明了. 就是要在gr ...

  5. checkbox探究

    介绍checkbox checkbox: A check box. You must use the value attribute to define the value submitted by ...

  6. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  7. CSS3和jQuery实现的自定义美化Checkbox

    效果图: 是不是比默认的好看多了,个人的审美观应该还是可以的. 当然我们可以在这里查看DEMO演示. 接下来我们一起来看看实现这款美化版Checkbox的源代码.主要思路是利用隐藏原来的checkbo ...

  8. TreeView checkbox 全选

    在使用TreeView 控件 ,进行权限管理的时候,需要使用 checkbox全选. 勾选父节点,子节点全部选中.取消父节点,子节点不选中. 勾选子节点,父节点也选中. 以下是在使用的例子: < ...

  9. checkbox实现全选全不选

    1.jQuery实现checkbox全选全不选 <!DOCTYPE html> <head runat="server"> <title>jQu ...

随机推荐

  1. 详解:数据库名、实例名、ORACLE_SID、数据库域名、全局数据库名、服务名及手工脚本创建oracle数据库

    数据库名.实例名.数据库域名.全局数据库名.服务名 , 这是几个令很多初学者容易混淆的概念.相信很多初学者都与我一样被标题上这些个概念搞得一头雾水.我们现在就来把它们弄个明白. 一.数据库名 什么是数 ...

  2. [SQL入门级] 第一天 SQL初步

    SQL语句分为以下三种类型: DML:Data Manipulation Language 数据操纵语言 INSERT UPDATE DELETE SELECT DDL:Data Definition ...

  3. 运行第一个abp项目VS2015+localDB

    ASP.NET Boilerplate,简称ABP 详细深入:可以参考如下文章 http://www.cnblogs.com/mienreal/p/4528470.html http://www.cn ...

  4. YbSoftwareFactory 代码生成插件【二十三】:集成强大的公文流转系统

    今天有空更新博客才发现快一年没有写博客了,不得不感叹时间过得真快.过去的一年确实也挺忙的,在此祝各位博友们新的一年工作顺利.权限模型在过去一年进行了不少的升级,主要集成了公文流转系统.多家手机短信接口 ...

  5. IE6不支持min-heightt和min-width的解决办法

    IE6不支持min-height的解决办法 最小高度min-height是很有用的,但IE6却不支持.真烦人.有没有办法呢? 我们可以利用IE6不识别!important来实现: height:aut ...

  6. c# winform DirectX播放器 可以任意设置宽高比 屏幕拉伸

    第一步:dll引用 Microsoft.DirectX.dll Microsoft.DirectX.AudioVideoPlayback.dll 如果没有的话,可能需要安装微软的DRECTX JDK ...

  7. Python—sqlalchemy

    SQLAlchemy SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作. #Dialect用于和数据API进行交流,根据配置文 ...

  8. win7下matlab2016a配置vlfeat

    1.下载vlfeat http://www.vlfeat.org/ 2.解压到了matlab安装目录的toolbox下 3.打开vs2013的这个 4.输入nmake version  查看我的版本是 ...

  9. activity的四种加载模式

    在android里,有4种activity的启动模式,分别为: standard, singleTop, singleTask和singleInstance, 其中standard和singleTop ...

  10. xcode8+iOS10问题

    .xcode升级到8.0后打印的问题 ()xcode8会打印一些莫名其妙的log 解决方法:Scheme里面添加OS_ACTIVITY_MODE = disable ()xcode8打印log不完整 ...