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:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
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
很实用的一个完整email发送程序
2006/10/09 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
javascript动画浅析
2012/08/30 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Tornado 多进程实现分析详解
2018/01/12 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Python 编程速成(推荐)
2019/04/15 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
信号生成及DFT的python实现方式
2020/02/25 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
服务员自我评价
2014/01/25 职场文书
优秀党员获奖感言
2014/02/18 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL