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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
详解jquery选择器的原理
Aug 01 jQuery
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
require.js 加载过程与使用方法介绍
Oct 30 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 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
深入理解node.js http模块
2018/01/24 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
详解python的几种标准输出重定向方式
2016/08/15 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
django页面跳转问题及注意事项
2019/07/18 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
生物科学专业个人求职信范文
2013/12/05 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
小学语文业务学习材料
2014/06/02 职场文书
社区矫正工作方案
2014/06/04 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
前台岗位职责
2015/02/13 职场文书
护士医德医风心得体会
2016/01/25 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS