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 相关文章推荐
arguments对象
Nov 20 Javascript
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
JavaScript运算符小结
Jun 03 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
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通过COM使用ADODB的简单例子
2006/12/31 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
一道SQL面试题
2012/12/31 面试题
酒店秘书求职信范文
2014/02/17 职场文书
给领导的感谢信范文
2015/01/23 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
2015年征兵工作总结
2015/07/23 职场文书
单位领导婚礼致辞
2015/07/28 职场文书