jquery 操作单选框,复选框,下拉列表实现代码


Posted in Javascript onOctober 27, 2009

1、复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器
html代码:

<form> 
您爱好的运动是: 
<input type="checkbox" name="item" value="football"/> football 
<input type="checkbox" name="item" value="basketball"/> basketball 
<input type="checkbox" name="item" value="badminton"/> badminton 
<input type="checkbox" name="item" value="pingpong"/> pingpong 
<input type="button" id="checkAll" value="全选"/> 
<input type="button" id="checkFootball" value="选中足球"/> 
</form>

Jquey js 脚本:
$('#checkAll').click (checkAll); // 全选 
$('#checkFootball').click (checkFootball); // 单选足球 
}); 
function checkAll() 
{ 
$('input [type="checkbox"][name="item"]').attr ("checked", true); 
// $('[name="item"]:checkbox').attr("checked", true); 
}

注: 全反选只需要将这里的 true 换成 false 即可。
选中足球操作
Jquey js 脚本:
function checkFootball() 
{ 
$(" [name='item']:checkbox").each(function () { 
if (this.value == 'football') 
{ 
this.checked = true; 
} 
}) 
}

注: 具体目的为了解决从后台取出数据,显示。这里并没有用jQuery的attr()和val()方法来设置选中和获得当前checkbox的值,改用了JavaScript原生的 Dom 方法,将比创建 jQuery对象更有效
2. 单选按钮操作
html代码:
A B C D 您选择哪一个: 
<input type="radio" name="item" value="A"/>A 
<input type="radio" name="item" value="B"/>B 
<input type="radio" name="item" value="C"/>C 
<input type="radio" name="item" value="D"/>D 
<input type="button" id="getLetter" value="获得字母 "/>

初始化选中字母B
Jquey js 脚本:
$(document).ready(function() { 
// 数据初始化选择B。 
$('[name="item"]:radio').each(function() { 
if (this.value == 'B') 
{ 
this.checked = true; 
} 
}); 
// 绑定获得字母的事件 
$('#getLetter').click(getLetter); 
});

获得所选中的字母
Jquey js 脚本:
function getLetter() 
{ 
alert('获得的字母为:' + $('[name="item"][checked=true]:radio').val()); 
}

3. 下拉框(列表)操作
<select multiple id="choose" style="width=100px;heigth=160px"></select> 
<input id="addOptions" type="button" value="添加数据"/> 
<input id="getSelectedOption" type="button" value="获得选中的值"/> 
<input id="clearOptions" type="button" value="清空列表"/>

Jquey js 脚本:
$(document).ready(function() { 
$('#addOptions').click(addOptions); // 为列表添加元素 
$('#getSelectedOption').click(getSelectedOption); // 获得选中的元素 
$('#clearOptions').click(clearOptions); // 清楚列表中的元素 
$('#addOptions').click(); // 触发为列表添加元素事件 
});

追加元素
Jquey js 脚本:
function addOptions() 
{ 
var selectContainer = $('#choose'); 
for (var i = 0; i < 5; i++) 
{ 
var option = $('<option></option>').text('choose' + i).val(i); 
selectContainer.append(option); 
} 
}

获得选中的元素
function getSelectedOption() 
{ 
/* 逐个弹出每个元素 */ 
var options = $('#choose > option:selected'); 
$.each(options, function () { 
alert('option: ' + this.value); 
}); 
/* 逐个弹出每个元素,第一种的简写 */ 
$('#choose > option:selected').each(function() { 
alert('option2: ' + this.value); 
}); 
// 直接弹出数据, 如果是对下拉框,则直接弹出数据,如果是列表并且选择了多个数 
// 据,将数据以','分隔显示 
alert('val: ' + $('#choose').val()); 
}

清空列表
function clearOptions() 
{ 
$('#choose').empty(); 
}

常用的:
var ddl = $("#ddlDiaryType option:selected").text();//下拉别表 
var reb = $("#RbIfprivate [checked=true]:radio").val();//单选框
Javascript 相关文章推荐
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
javascript获得CheckBoxList选中的数量
Oct 27 #Javascript
基于jQuery的日期选择控件
html 锁定页面(js遮罩层弹出div效果)
Oct 27 #Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 #Javascript
Ajax+Json 级联菜单实现代码
Oct 27 #Javascript
javascript 关于# 和 void的区别分析
Oct 26 #Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 #Javascript
You might like
PHP新手上路(六)
2006/10/09 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
php检测文本的编码
2015/07/26 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
短信提示使用 特效
2007/01/19 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
js面向对象的写法
2016/02/19 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
通过python爬虫赚钱的方法
2019/01/29 Python
win10安装python3.6的常见问题
2020/07/01 Python
Python实现区域填充的示例代码
2021/02/03 Python
个人自我鉴定怎么写
2013/10/28 职场文书
大学四年规划书范文
2013/12/27 职场文书
新党章心得体会
2014/09/04 职场文书
2015年质检工作总结
2015/05/04 职场文书
班级联欢会主持词
2015/07/03 职场文书
《打电话》教学反思
2016/02/22 职场文书