`

jQuery checkbox 选中 取消-20130713

attrremoveAttrremoveClassaddClass 
阅读更多
1、效果及功能说明

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

2、实现原理

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

主要的方法 

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


3、效果图





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>
  • 大小: 12.4 KB
分享到：
| jQuery段落文字内容高亮显示提示-20130712
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery checkbox 选中 取消 checkbox多选

    jquery checkbox 选中 取消 checkbox多选

    jquery获取checkbox选中的值

    jquery获取checkbox选中的值，包括全选 取消全选 反选 选中奇数行 获取选中的值

    js实现翻页后保持checkbox选中状态的实现方法

    所以checkbox为false。...把选中的checkbox中的id，其中包括模块id，操作id，拼接成一个字符串，然后把字符串传递到action中。 每次调用此页面时，首选调用action中的选中的id字符串，然后根据在id字符串的基

    jQuery基于layui插件制作checkbox复选框选中代码

    jQuery基于layui插件制作checkbox复选框选中代码，权限范围多选、单选、全选代码；checkbox父级子级结构，父级选中，子级全选，子级没有选中父级取消选中效果。

    jQuery实现checkbox全选的方法

    本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下： 通过checkbox 进行全选和取消全选的操作，如果通过toggle进行处理，则会出现checkbox无法显示对勾的问题。 使用click事件，根据...

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    有一个多选的需求，在网上找到了这个插件：multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍，不少童鞋都问了这么个问题，怎么获取选中的值？真是个好问题，因为我...

    jQuery.checkboxGroup:checkun的复选框选中jquery lib的一组复选框

    这是一个非常简单的插件，可让您轻松地将某些复选框组合在一起并创建一个主复选框，该主复选框可以选中或取消选中所有从属复选框。 如何使用它 给定一个具有id master的复选框和一个字段集中的某些复选框，您可以...

    jquery checkbox的相关操作总结

    jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox 1、全选 $(#btn1).click(function(){ $(input[name='checkbox']).attr(checked,true); }) 2、取消全选（全不选） $(#btn2).click(function()...

    JQUERY CHECKBOX全选,取消全选,反选方法三

    为了让大家更好的理解,我直接把实现功能的代码贴出来: 代码如下:$(“#myform”).toggleCheckboxes()//全选,取消全选,反选 $(“#myform”).toggleCheckboxes(“:not(#checkbox1)”)//全选,取消全选且不选中第一个,...

    JQuery限制复选框checkbox可选中个数的方法

    主要介绍了JQuery限制复选框checkbox可选中个数的方法,涉及jQuery操作复选框长度判断与属性修改的相关技巧,非常具有实用价值,需要的朋友可以参考下

    jQuery实现点击行选中或取消CheckBox的方法

    本文实例讲述了jQuery实现点击行选中或取消CheckBox的方法。分享给大家供大家参考，具体如下： /// /// 点击行选中或者取消CheckBox /// /// 表ID function SetCheckBox_Check(TableID) { var $TableID = Table...

    选中/取消选中CheckBoxList中的所有复选框

    选中/取消选中CheckBoxList（一个控件）中的所有复选框。

    jQuery操作CheckBox的方法介绍(选中,取消,取值)

    本篇文章主要是对jQuery操作CheckBox的方法(选中,取消,取值)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    浅析jquery与checkbox的checked属性的问题

    1、页面加载成功后，点击选中或取消选中该checkbox，checkbox属性里的checked属性不会根据该checkbox是否选中而变化 2、checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的...

    jquery遍历checkbox介绍

    checkbox 全选\全部取消$(“#ChkAll”).click(function(){ $(“#divContent input[type=’checkbox’]”).attr(“checked”,$(this).attr(“checked”));}); 获取选中的checkbox的value值:var arrChk=$(“input...

    jquery操作checkbox实现全选和取消全选

    获取选中的：$(“:checked[checked=’checked’]”) 发现点全选可以，在点取消全选也可以，获取选中的失效，接下来再点任何按钮都没有效果了 这样行不通，我也不太清楚什么原因，脚本语言就这毛病，一边灵活一边...

    vChecks 漂亮的jquery checkbox插件

    脚本资源,Ajax/JavaScript,jQuery插件,vChecks　vChecks 漂亮的jquery checkbox插件，使用了jquery.vchecks.js插件，将CheckBox变成长条形，像按钮一样的，你只需点击按钮就可改变checkbox的值，并可适时显示选中的...

    jquery checkbox 勾选的bug问题解决方案与分析

    在做项目的时候遇到个jQuery checkbok复选框的选中取消的BUG，咨询了大神，才闹明白怎么回事，这里记录下来，分析给大家。 先上代码： 代码如下: &lt;form&gt;  你爱好的运动是？&lt;input type=”checkbox” id=...

Magicbox
Global site tag (gtag.js) - Google Analytics