欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

jQuery checkbox 选中 取消-20130713

程序员文章站 2022-07-12 21:35:12
...
1、效果及功能说明

checkbox多选框点击事件控制显示隐藏

2、实现原理

点击打勾点击填写内容信息，会触发添加一个类，这个类能让下面的用户名和密码的输入框填写当没有打勾的时候就会把这个类给删除掉让用户名和密码没办法填写

主要的方法 

$("#findform li .inputext").removeClass("grayinput");
删除类，不能填写
$("#findform li .inputext").addClass("grayinput");
点击以后添加这个类，变得可以填写


3、效果图


jQuery checkbox 选中 取消-20130713 博客分类： jQuery前端技术学习 attrremoveAttrremoveClassaddClass 


4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现


(无图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果


7、代码[html5] 

<!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
<style type="text/css">
*{margin:0;margin:0;list-style-type:none;}
a,img{border:0;}
img{vertical-align:middle;}
label{cursor:pointer;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
body{font:12px/180% Arial,"宋体";color:#333;}

.formbox{width:400px;border:solid 1px #ddd;padding:10px 20px 20px 20px;margin:0 auto;}
.findfive{height:20px;overflow:hidden;padding:5px 0 0 20px;}
/* findform */
#findform{padding:0 0 0 20px;}
#findform li .inputext{width:360px;height:20px;line-height:20px;padding:0 0 0 3px;background:url(images/inputbg.png) no-repeat;border:solid 1px #c6c6c6;}
#findform li .inputext input{border:none;font-family:Arial;background:none;width:97%;margin:3px 0 0 0;}
#findform li .grayinput{background:url(images/inputgraybg.png) no-repeat;}
</style>

<div class="formbox">
	<div class="findfive"><input type="checkbox" name="" id="five" /> <label for="five">点击填写内容信息</label></div>
	<ul id="findform" class="clearfix">
		<li><span class="f-l">姓名：</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li>
		<li><span class="f-l">身份证号：</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li>
		<li><span class="f-l">手机（选填）：</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li>
	</ul>
</div><!--formbox end-->

<script type="text/javascript">
$(document).ready(function(){
//定义一个可以激活所有函数的方法
	$("#five").click(function(){
	//定义一个点击事件
		if($(this).attr("checked")){
		//如果改变图像的 width 属性 checked 属性设置或返回 checkbox 是否应被选中
			$("#findform li input").removeAttr("disabled","");
			//定义一个 从 findform li input 里面删除 disabled  
			$("#findform li .inputext").removeClass("grayinput");
			//定义 在从 findform li .inputext里面删除掉 grayinput 类
		}else{
		//否则
			$("#findform li input").attr("disabled","disabled");
			//findform li input 改变图片的 width 属性 disabled
			$("#findform li .inputext").addClass("grayinput");
			//在findform li .inputext里面添加一个grayinput类
		}
	})
});
</script>
</body>
</html>
  • jQuery checkbox 选中 取消-20130713 博客分类： jQuery前端技术学习 attrremoveAttrremoveClassaddClass 
  • 大小: 12.4 KB
相关标签： attr removeAttr removeClass addClass

上一篇： jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏-20130715

下一篇： Hover.css：CSS3悬停特效合集

推荐阅读