基于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 相关文章推荐
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
Python中表示字符串的三种方法
2017/09/06 Python
详解Python中where()函数的用法
2018/03/27 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
python实现控制台打印的方法
2019/01/12 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python创建学生成绩管理系统
2019/11/22 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
JPA的优势都有哪些
2013/07/04 面试题
体育教师自荐信范文
2013/12/16 职场文书
积极向上的团队口号
2014/06/06 职场文书
女生节标语
2014/06/26 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
大国崛起英国观后感
2015/06/02 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python