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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 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中include与require使用方法区别详解
2013/10/19 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
Julep官网:美容产品和指甲油
2017/02/25 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
任命书模板
2014/06/04 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
学生会自荐信
2019/05/16 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
python3 字符串str和bytes相互转换
2022/03/23 Python
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android