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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
原生JS运动实现轮播图
Jan 02 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加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
php安装swoole扩展的方法
2015/03/19 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
JS中的作用域链
2017/03/01 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
用Python shell简化开发
2018/08/08 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
jupyter notebook 重装教程
2020/04/16 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Wallis官网:英国女装零售商
2020/01/21 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
实践单位评语
2014/04/26 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
Nginx跨域问题解析与解决
2022/08/05 Servers
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript