基于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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
jQuery Ajax 全解析
Feb 08 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
基于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面向对象的方法重载两种版本比较
2008/09/08 PHP
php flv视频时间获取函数
2010/06/29 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
vue基于element的区间选择组件
2018/09/07 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
安全月活动总结
2014/05/05 职场文书
个人安全承诺书
2014/05/22 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
话题作文之成长
2019/12/09 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书