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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
jQuery的学习步骤
Feb 23 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
js实现消息滚动效果
Jan 18 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
js实现简单的轮播图效果
Dec 13 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
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作的文本留言本的例子(六)
2006/10/09 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python中requests和https使用简单示例
2018/01/18 Python
python实现单向链表详解
2018/02/08 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
python3实现随机数
2018/06/25 Python
浅谈Python 递归算法指归
2019/08/22 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
Ajax的工作原理
2015/12/04 面试题
科室工作个人总结的自我评价
2013/10/29 职场文书
求职教师自荐书
2014/06/19 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
龙猫观后感
2015/06/09 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL