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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 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
SSI指令
2006/11/25 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
视觉直观感受若干常用排序算法
2017/04/13 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
植物选择:Botanic Choice
2017/02/15 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
Unix如何添加新的用户
2014/08/20 面试题
旅游网创业计划书
2014/01/31 职场文书
房屋租赁意向书
2014/04/01 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers