jQuery获取(选中)单选,复选框,下拉框中的值


Posted in Javascript onFebruary 21, 2014

实例如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript">
function aa(){
// 获取单选按钮的值
var a = $("input[name='sex'][checked]").val();
alert(a);
}
function bb(){
// 若选中返回true,否则返回false
var c = $("#a").attr("checked");
alert(c);
// 获取单个复选框的值
var d = $("input[name='checkName'][checked]").val();
alert(d);
// 获取多个复选框的值
$("input[name='checkName'][checked]").each(function(){
if(this.checked)
alert($(this).val());
});
}
function checkWeek(){
//var $param = {};
$("#mPrefType").each(function(){
//    var key = $(this).attr("name");
//    if(!$param[key])
//        $param[key] = [];
// 获得value值
var value = $("##mPrefType option:selected").val();
alert(value);
// 获得需要的值
var name = $("##mPrefType option:selected").text();
alert(name);
});
}
</script>
</head>
<body>
Number:<input type = "text" value ="" name ="num1"/><br>
Number:<input type = "text" value ="" name = "num2"/><br>
<input type = "radio" value = "a"  name = "ss" />a
<input type = "radio" value = "b"  name = "ss" />b
<input type = "radio" value = "c"  name = "ss"/>c
<input type = "radio" value = "d"  name = "ss" >d<br>
<input type = "submit"  value = "提交"/> <br>
<hr>
<input type="radio" value="男" name="sex" id="1" onclick="aa()"/>男
<input type="radio" value="女" name="sex" id="0" onclick="aa()"/>女<br>
<input type="button" value="您选择的性别" onclick="aa()"/><br>
<hr>
<input type="checkbox" name="checkName" value="aa" id="a"/>aa
<input type="checkbox" name="checkName" value="bb" id="b"/>bb
<input type="checkbox" name="checkName" value="cc"/>cc
<input type="checkbox" name="checkName" value="dd"/>dd<br>
<input type="button" value="您选择的值是" onclick="bb()"/>
<hr>
<ul>
<li>请选泽</li>
<li>
<select id="mPrefType" name="mPrefType" class="inputS" onchange="checkWeek()">
<option value=0>请选择:</option>
<option value=1>星期一</option>
<option value=2>星期二</option>
<option value=3>星期三</option>
<option value=4>星期四</option>
<option value=5>星期五</option>
<option value=6>星期六</option>
<option value=7>星期日</option>
</select>
</li>
</ul>
</body>
</html>
Javascript 相关文章推荐
javascript  Error 对象 错误处理
May 18 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
js切换div css注意的细节
Dec 10 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
对layui中的onevent 和event的使用详解
Sep 06 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 Javascript
jquery五角星评分插件示例分享
Feb 21 #Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 #Javascript
jquery自定义滚动条插件示例分享
Feb 21 #Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 #Javascript
利用Jquery实现可多选的下拉框
Feb 21 #Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 #Javascript
jQuery 无限级菜单的简单实例
Feb 21 #Javascript
You might like
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
关于尾递归的使用详解
2013/05/02 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
详解python Todo清单实战
2018/11/01 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
军训自我鉴定
2013/12/14 职场文书
人力资源经理自我评价
2014/01/04 职场文书
优秀护士先进事迹
2014/05/08 职场文书
大学军训口号大全
2015/12/24 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
Python中的程序流程控制语句
2022/02/24 Python