基于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 相关文章推荐
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
详解vue3中组件的非兼容变更
Mar 03 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 expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php查询whois信息的方法
2015/06/08 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
首页图片漂浮效果示例代码
2014/06/05 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
详谈js模块化规范
2017/07/07 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python3计算三角形的面积代码
2017/12/18 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
python实现简单坦克大战
2020/03/27 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
先进个人事迹材料
2014/01/25 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书