`

jQuery checkbox 选中 取消-20130713

阅读更多
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 checkbox 选中 取消 checkbox多选

    本文将深入探讨如何使用jQuery来实现复选框(checkbox)的选中和取消选中功能,以及如何处理多选的情况。 首先,我们需要理解HTML中的`&lt;input&gt;`元素类型为"checkbox"的基本用法。复选框用于让用户从多个选项中选择...

    jQuery操作checkbox并获取选中值

    与全选相反,全不选是取消所有checkbox的选中状态。同样使用`.prop()`方法,但将参数设为false: ```javascript $('input[type="checkbox"]').prop('checked', false); ``` ### 四、反选功能 反选功能是将已选中...

    checkbox使用jquery全选-反选-取得选中的值-Housl.zip

    `$("input[type='checkbox']")`则选择了所有的复选框,`.not(this)`排除了主复选框本身,`.prop("checked", this.checked)`用于设置或获取属性值,如果主复选框被选中,则所有子复选框也会被选中,反之则取消选中。...

    jquery获取checkbox选中的值

    在本文中,我们将深入探讨如何使用jQuery来获取checkbox选中的值,包括全选、取消全选、反选以及选中奇数行的操作,并讲解如何获取选中的值。 首先,我们需要引入jQuery库。在`1.html`文件中,我们看到包含了一个名...

    jquery 对checkbox的操作

    本文将详细探讨如何使用jQuery对checkbox进行操作,这些操作包括选择、取消选择、检查状态以及实现更复杂的交互效果。 一、jQuery选择checkbox 在jQuery中,我们可以使用不同的选择器来选取checkbox元素。例如,`$...

    绚丽的复选框 jquery-checkbox

    console.log("复选框已被取消选中"); } }); ``` 5. **兼容性**:jQuery-Checkbox通常对主流浏览器有良好的支持,包括Chrome、Firefox、Safari、Edge和Internet Explorer。但请注意,不同的浏览器可能会有不同的...

    jQuery获取checkbox选中的值

    - **实现全选/全不选和交错选中**:代码中包含了控制所有checkbox选中状态的按钮,并有示例显示如何选中所有奇数位置的checkbox。 ### 结论 理解并掌握如何使用jQuery获取和操作checkbox元素,对于开发交互式的Web...

    jquery checkbox点击选中列表样式代码

    这样,当用户点击"Select All"时,所有列表项的checkbox会被同步选中或取消,相应的样式也会随之更新。 总结起来,通过使用jQuery,我们可以轻松实现checkbox点击选中列表样式的功能。这不仅提高了用户体验,也让...

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

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

    JQuery操作checkbox、radio等示例

    例如,`$("#myCheckbox").prop("checked", true)`会勾选该checkbox,`$("#myRadio").prop("checked", false)`则会取消选中。 4. **触发事件**:jQuery允许我们监听用户的交互,比如当checkbox或radio的状态改变时。...

    jQuery UI Multiselect (jQuery UI 多选框)

    - **全选/取消全选**:jQuery UI Multiselect 提供了一个便捷的全选按钮,允许用户一键选择所有选项,同时也能够快速取消所有选择。 - **分组和筛选**:通过自定义的HTML结构,可以实现选项的分组展示,同时提供搜索...

    checkbox鼠标拖拽框选

    5. **CSS辅助**:为了视觉上呈现选中效果,我们可能还需要一些CSS样式来标记选中的checkbox,例如添加一个类`selected`,并定义相应的样式。同时,可以使用CSS来创建拖拽时的高亮边框,提升用户体验。 6. **性能...

    jQuery多级复选框checkbox选中代码

    在本例中,jQuery将用于处理复选框的选中和取消选中状态。基本的复选框选中和取消选中的jQuery代码如下: ```javascript $('input[type="checkbox"]').click(function() { $(this).prop('checked', !$(this).is(':...

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

    在本文中,我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框,包括权限范围的多选、单选以及全选操作。同时,我们也将关注于父级和子级复选框之间的联动关系,即父级选中时子级全部选中,而...

    JQuery实现checkbox的全选取消全选

    在IT领域,特别是前端开发中,使用jQuery来操作DOM元素是一种常见的实践,特别是在处理复选框(checkbox)的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能,通过分析给定代码片段,提炼出关键...

    jquery实现 复选框 选中和不选中 美化复选框

    在网页设计中,复选框(Checkbox)是用户界面中常用的一种元素,它允许用户对多个选项进行选择或取消选择。然而,原生的HTML复选框在样式上可能较为简单,无法满足现代网页设计美观的需求。jQuery作为一个强大的...

    checkbox全选,选中数据传到后台

    在IT行业中,尤其是在Web开发领域,"checkbox全选,选中数据传到后台"是一个常见的功能需求。这个功能主要用于用户批量处理数据,如删除、修改等。以下是对这个主题的详细解析: 首先,我们需要理解标题中的关键词...

    jquery操作Radio、Checkbox、Select Demo

    1. **设置Checkbox选中状态**: ```javascript $('input[type="checkbox"]').prop('checked', true); // 选中所有Checkbox $('#checkbox1').prop('checked', true); // 选中ID为'checkbox1'的Checkbox ``` 2. *...

Global site tag (gtag.js) - Google Analytics