基于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 相关文章推荐
Javascript 兼容firefox的一些问题
May 21 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
PHP队列用法实例
2014/11/05 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
使用python分析git log日志示例
2014/02/27 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
python画图常规设置方式
2020/03/05 Python
python 两种方法删除空文件夹
2020/09/29 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年医生工作总结
2014/11/21 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
故宫英文导游词
2015/01/31 职场文书
anaconda python3.8安装后降级
2021/06/11 Python