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 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 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
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
js 手机号码合法性验证代码集合
2012/09/29 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python入门教程之if语句的用法
2015/05/14 Python
Python实现LRU算法的2种方法
2015/06/24 Python
pandas中去除指定字符的实例
2018/05/18 Python
详解Python高阶函数
2020/08/15 Python
python 实现IP子网计算
2021/02/18 Python
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android