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 相关文章推荐
用于table内容排序
Jul 21 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 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中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
python使用psutil模块获取系统状态
2016/08/27 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python小项目之五子棋游戏
2019/12/26 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Python有参函数使用代码实例
2020/01/06 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
儿园租房协议书范本
2014/12/02 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
sql中mod()函数取余数的用法
2021/05/29 SQL Server
Python中Selenium对Cookie的操作方法
2021/07/09 Python
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS