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 相关文章推荐
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
Javascript webpack动态import
Apr 19 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 如何向 MySQL 发送数据
2006/10/09 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
js实现数组转换成json
2015/06/26 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python中的字典遍历备忘
2015/01/17 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
基于python plotly交互式图表大全
2019/12/07 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
暑期实践思想汇报
2014/01/06 职场文书
晚归检讨书
2014/02/19 职场文书
师恩难忘教学反思
2014/04/27 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
争先创优个人总结
2015/03/04 职场文书
离婚起诉书范本
2015/05/18 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP