基于jQuery的获得各种控件Value的方法


Posted in Javascript onNovember 19, 2010

HTML代码

<asp:RadioButtonList ID="RadioButtonList1" runat="server"> 
<asp:ListItem>1</asp:ListItem> 
<asp:ListItem>2</asp:ListItem> 
<asp:ListItem>3</asp:ListItem> 
<asp:ListItem>4</asp:ListItem> 
</asp:RadioButtonList> 
<div style="text-align: left"> 
<a id="btnGetRadioButtonListValue" href="javascript:">通过Type获得RadioButtonList的Value</a> 
</div> 
<br /> 
<div style="text-align: left"> 
<input type="radio" name="radioSelect" value="A" />A<br /> 
<input type="radio" name="radioSelect" value="B" />B<br /> 
<input type="radio" name="radioSelect" value="C" />C<br /> 
<input type="radio" name="radioSelect" value="D" />D<br /> 
</div> 
<div style="text-align: left"> 
<a id="btnGetRadioValue" href="javascript:">通过Name获得Radio的Value</a> 
</div> 
<br /> 
<br /> 
<div style="text-align: left"> 
<input type="checkbox" name="chkSelect" value="A" />A<br /> 
<input type="checkbox" name="chkSelect" value="B" />B<br /> 
<input type="checkbox" name="chkSelect" value="C" />C<br /> 
<input type="checkbox" name="chkSelect" value="D" />D<br /> 
</div> 
<div style="text-align: left"> 
<a id="btnGetCheckBoxValue" href="javascript:">通过Name获得CheckBox的Value</a> <a id="btnSelectAllOn" href="javascript:">全选</a> <a id="btnSelectAllOff" href="javascript:">反选</a> 
</div> 
<br /> 
<br /> 
<div style="text-align: left"> 
<select id="multiple1" multiple="multiple" style="width: 300px; height: 300px;"> 
<option value="A1">A1</option> 
<option value="A2">A2</option> 
<option value="A3">A3</option> 
<option value="A4">A4</option> 
</select> 
</div> 
<div style="text-align: left"> 
<a id="btnGetMultipleValue" href="javascript:">获得Multiple的Value</a> <a id="btnAddMultipleOption" href="javascript:">添加</a> <a id="btnRemoveMultipleOption" href="javascript:">移除</a> 
</div> 
<br /> 
<br /> 
<div style="text-align: left"> 
<select id="select1"> 
<option value="B1">B1</option> 
<option value="B2">B2</option> 
<option value="B3">B3</option> 
<option value="B4">B4</option> 
</select> 
</div> 
<div style="text-align: left"> 
<a id="btnGetSelectValue" href="javascript:">获得Select的Value</a> <a id="btnAddSelectOption" href="javascript:">添加</a> <a id="btnRemoveSelectOption" href="javascript:">移除</a> 
</div>

jQuery代码
<script type="text/javascript"> 
$(document).ready(function () { 
//获得RadioButtonList的Value 
$("#btnGetRadioButtonListValue").click(function () { 
if ($("input[type=radio]:checked").val() == null) { 
alert("请选择"); 
return false; 
} 
alert($("input[type=radio]:checked").val()); 
}); 
//获得Html的Radio的Value 
$("#btnGetRadioValue").click(function () { 
if ($("input[name='radioSelect']:checked").val() == null) { 
alert("请选择"); 
return false; 
} 
alert($("input[name='radioSelect']:checked").val()); 
}); 
//获得CheckBox的Value 
$("#btnGetCheckBoxValue").click(function () { 
var values = ""; 
$("input[name='chkSelect']").each(function () { 
if ($(this).attr("checked")) { 
values += $(this).val() + ","; 
} 
}); 
if (values == "") { 
alert("请选择"); 
return false; 
} 
values = values.substring(0, values.length - 1); //去掉尾部, 
alert(values); 
}); 
//全选 
$("#btnSelectAllOn").click(function () { 
$("input[name='chkSelect']").each(function () { 
$(this).attr("checked", true); 
}); 
}); 
//返选 
$("#btnSelectAllOff").click(function () { 
$("input[name='chkSelect']").each(function () { 
$(this).attr("checked", false); 
}); 
}); 
//获得Multiple的值 
$("#btnGetMultipleValue").click(function () { 
var values = ""; 
$("#multiple1 option:selected").each(function () { 
values += $(this).val() + ","; 
}) 
values = values.substring(0, values.length - 1); //去掉尾部, 
alert(values); 
}); 
//添加Multiple的Option 
$("#btnAddMultipleOption").click(function () { 
$("#multiple1").append("<option value='AX'>AX</option>"); 
}); 
//移除Multiple所选Option 
$("#btnRemoveMultipleOption").click(function () { 
$("#multiple1 option").remove("option:selected"); 
}); 
//获得Select的值 
$("#btnGetSelectValue").click(function () { 
alert($("#select1 option:selected").val()); 
}); 
//添加Select的Option 
$("#btnAddSelectOption").click(function () { 
$("#select1").append("<option value='BX'>BX</option>"); 
}); 
//移除Select所选Option 
$("#btnRemoveSelectOption").click(function () { 
$("#select1 option").remove("option:selected"); 
}); 
}); 
</script>
Javascript 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
JS实现图片切换效果
Nov 17 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 #Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 #Javascript
DIV菜单层实现代码
Nov 19 #Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 #Javascript
基于jquery的跨域调用文件
Nov 19 #Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 #Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 #Javascript
You might like
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
python中redis的安装和使用
2016/12/04 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python原始套接字编程实例解析
2020/01/29 Python
python实现人机五子棋
2020/03/25 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
高中军训感言1000字
2014/03/01 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
室内趣味活动方案
2014/08/24 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
优秀员工事迹材料
2014/12/20 职场文书
宣传委员竞选稿
2015/11/19 职场文书
工伤调解协议书
2016/03/21 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技