c#+jquery实现获取radio和checkbox的值


Posted in Javascript onSeptember 12, 2020

废话不多说,直接上代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Web2.aspx.cs" Inherits="Chapter2.Web2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="jquery-1.8.0.js"></script>

<script type="text/javascript">

$(function () {

$("#sub").click(function () {

var str1 = "张三:" + $("#name").val();

var str2 = "性别:" + $('input:radio[name = "sex"]:checked').val();

var shuzu = [];

$('input:checkbox[name = "aihao"]:checked').each(function () {//each每个

shuzu.push($(this).val());//给数组赋值

});

window.alert(str1 + '\n' + str2 + '\n' + "爱好:" + shuzu);

});

});

</script>

</head>

<body>

<form id="form1" runat="server">

姓名:<input type="text" id="name" /><br />

性别:<input type="radio" id="nan" name="sex" checked="" value="男" />男<input type="radio" id="nv" name="sex" value="女" />女<br />

爱好:<input type="checkbox" />游泳

<input type="checkbox" name="aihao" value="爬山" />爬山

<input type="checkbox" name="aihao" value="打球" />打球

<input type="checkbox" name="aihao" value="骑车" />骑车

<input type="checkbox" name="aihao" value="阅读" />阅读

<input type="checkbox" name="aihao" value="聊天" />聊天<br />

<input type="button" id="sub" value="提交" /><input type="button" id="b" value="重置" />

</form>

</body>

</html>

代码很简洁,却很实用,小伙伴们根据自己的项目需求改写下即可使用。

Javascript 相关文章推荐
Jquery实现的角色左右选择特效
May 21 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
深入理解angularjs过滤器
May 25 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
express的中间件cookieParser详解
Dec 04 #Javascript
express的中间件bodyParser详解
Dec 04 #Javascript
express的中间件basicAuth详解
Dec 04 #Javascript
详解JS函数重载
Dec 04 #Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 #Javascript
javascript常用代码段搜集
Dec 04 #Javascript
5种处理js跨域问题方法汇总
Dec 04 #Javascript
You might like
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
PHP _construct()函数讲解
2019/02/03 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
python操作xml文件示例
2014/04/07 Python
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
金融事务专业毕业生求职信
2014/02/23 职场文书
自行车广告词大全
2014/03/21 职场文书
环保倡议书范文
2014/05/12 职场文书
优质服务口号
2014/06/11 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
2014年财政所工作总结
2014/11/22 职场文书
中学生思想品德评语
2014/12/31 职场文书
2015公司年度工作总结
2015/05/14 职场文书
公司行政管理制度范本
2015/08/05 职场文书
尊师重教主题班会
2015/08/14 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers