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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
React学习笔记之列表渲染示例详解
Aug 22 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
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环境――Appserv
2006/12/13 PHP
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
js类型检查实现代码
2010/10/29 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
AngularJS快速入门
2015/04/02 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
详解Python中的日志模块logging
2015/06/19 Python
python操作redis的方法
2015/07/07 Python
详解Python进程间通信之命名管道
2017/08/28 Python
python实现顺时针打印矩阵
2019/03/02 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
超市后勤自我鉴定
2014/01/17 职场文书
上课看小说检讨书
2014/02/22 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
个人求职信格式范文
2015/03/20 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
毕业论文致谢词
2015/05/14 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
python四种出行路线规划的实现
2021/06/23 Python