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 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
ThinkPHP之getField详解
2014/06/20 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python在不同层级目录import模块的方法
2016/01/31 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python实现三次样条插值
2018/12/17 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python和Sublime整合过程图示
2019/12/25 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
今冬明春火灾防控工作方案
2014/05/29 职场文书
软环境建设心得体会
2014/09/09 职场文书
初婚初育证明范本
2015/06/18 职场文书
运动会开幕式致辞
2015/07/29 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
python编写五子棋游戏
2021/05/25 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python