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 相关文章推荐
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
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中执行cmd命令的方法
2014/10/11 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
php写app用的框架整理
2019/09/29 PHP
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
python的迭代器与生成器实例详解
2014/07/16 Python
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
Ruby如何定义一个类
2012/10/08 面试题
采购助理岗位职责
2014/02/16 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
2014年售票员工作总结
2014/11/19 职场文书
员工离职感谢信
2015/01/22 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android