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 相关文章推荐
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
angular简介和其特点介绍
Jan 29 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
php排序算法实例分析
2016/10/17 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
JS中的BOM应用
2018/02/02 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
flask应用部署到服务器的方法
2019/07/12 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
opencv 阈值分割的具体使用
2020/07/08 Python
中科前程Java笔试题
2016/11/20 面试题
大学生毕业求职信
2014/06/12 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
优秀大学生自荐信
2015/03/26 职场文书
Python Numpy库的超详细教程
2022/04/06 Python
Python实现双向链表
2022/05/25 Python