jquery对表单操作2


Posted in Javascript onApril 06, 2011

checkbox的级联效果

<form> 
你爱好的运动?<br/> 
<input type="checkbox" id="CheckedAll" />全选/全不选<br/> 
<input type="checkbox" name="items" value="足球"/>足球 
<input type="checkbox" name="items" value="篮球"/>篮球 
<input type="checkbox" name="items" value="羽毛球"/>羽毛球 
<input type="checkbox" name="items" value="乒乓球"/>乓球球 
<input type="button" id="send" value="提 交"/> 
$('#CheckedAll').click(function(){ 
$('[name=items]:checkbox').attr("checked", this.checked); 
})

当单击id为"CheckedAll"的复选框后,复选框组将被选中,当在复选框组中取消某一个选项的选中状态时,id为"CheckedAll"的复选框并没有被取消选中状态。
为解决这个问题:
$('[name=items]:checkbox').click( 
function(){ 
var flag = true; 
$('[name=items]:checkbox').each(function(){ 
if(!this.checked) 
flag = false; 
}); 
$('#CheckedAll').attr('checked', flag); 
}) 
//或者可以用复选框的总数与选中复选框数量相等 
$('[name=items]:checkbox').click( 
function(){ 
var $tmp = $('[name=items]:checkbox'); 
//使用filter方法筛选出复选框,并直接给CheckedAll赋值 
$('#CheckedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length); 
})

下拉框的应用
<div class="content"> 
<select multiple id="select1" style="width:100px;height:100px;"> 
<option value="1">选项1</option> 
<option value="2">选项2</option> 
<option value="3">选项3</option> 
<option value="4">选项4</option> 
<option value="5">选项5</option> 
<option value="6">选项6</option> 
<option value="7">选项7</option> 
</select> 
<div> 
<span id="add">选中添加到右边</span> 
<span id="add_all">全部添加到右边</span> 
</div> 
</div> 
<div class="content"> 
<select multiple id="select2" style="width:100px;height:100px;"> 
</select> 
<div> 
<span id="add">选中添加到左边</span> 
<span id="add_all">全部添加到左边</span> 
</div> 
<div> 
//将选中的选项添加给对方 
$('#add').click(function(){ 
var $options = $('#select1 option:selected');//获取选中的选项 
$options.appendTo('#select2');//追加给对方 
}); 
//将全部的选项添加给对方 
$('#add').click(function(){ 
var $options = $('#select1 option');//获取选中的选项 
$options.appendTo('#select2');//追加给对方 
}); 
//双击某个选项添加给对方 
$('#select1').dblclick(function(){ 
var $options = $('option:selected',this);//获取选中的选项 
$options.appendTo('#select2');//追加给对方 
})

PS: $('option:selected',this),$()有2个参数,一个是选择器,一个是作用域。相当于$('#select1 option:selected')
Javascript 相关文章推荐
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
jQuery对表单的操作代码集合
Apr 06 #Javascript
24款非常有用的 jQuery 插件分享
Apr 06 #Javascript
jquery常用技巧及常用方法列表集合
Apr 06 #Javascript
jQuery参数列表集合
Apr 06 #Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 #Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 #Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP中的cookie
2006/11/26 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
自荐信包含哪些内容
2013/10/30 职场文书
服务理念标语
2014/06/18 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
财务管理专业自荐书
2014/09/02 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
基层党组织整改方案
2014/10/25 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书