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 写的简单进度条控件
Jan 22 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
antd table按表格里的日期去排序操作
Nov 17 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
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
办公室文秘自我评价
2013/09/21 职场文书
七年级政治教学反思
2014/02/03 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
中小学生学籍证明
2014/10/25 职场文书
慈善募捐倡议书
2015/04/27 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫