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 相关文章推荐
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
使用D3.js制作图表详解
Aug 13 Javascript
vue实现路由切换改变title功能
May 28 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 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运行环境配置的详解
2013/06/04 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
python如何在终端里面显示一张图片
2016/08/17 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python实现剪切功能
2019/01/23 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
招商专员岗位职责
2014/02/08 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
倡议书格式范文
2014/04/14 职场文书
中考标语大全
2014/06/05 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
销售代理协议书
2014/09/30 职场文书
北京颐和园导游词
2015/01/30 职场文书
python绘制箱型图
2021/04/27 Python