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源码]超长文章自动分页(客户端版)
Jan 09 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
js中apply和call的理解与使用方法
Nov 27 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利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
2014年人大工作总结
2014/12/10 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
2016年情人节广告语
2016/01/28 职场文书
Python实现滑雪小游戏
2021/09/25 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
Nginx动静分离配置实现与说明
2022/04/07 Servers
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android