jQuery 获取和设置radio 和 checkbox 值的操作
jquery 中的val(),可以取值也可赋值,表单元素中的radio和checkbox是比较常用的控件,下面说说对它们的取值和赋值的使用
1、取值
表单如下:
<div class="items">
@if (Model.Question.type == "单选")
{
<div><input type="radio" id="A" name="sin" value="A" /><label for="A"><span class="item">A</span>@Model.Question.A</label></div>
<div><input type="radio" id="B" name="sin" value="B" /><label for="B"><span class="item">B</span>@Model.Question.B</label></div>
<div><input type="radio" id="C" name="sin" value="C" /><label for="C"><span class="item">C</span>@Model.Question.C</label></div>
<div><input type="radio" id="D" name="sin" value="D" /><label for="D"><span class="item">D</span>@Model.Question.D</label></div>
}
else if (Model.Question.type == "多选")
{
<div><input type="checkbox" id="A" name="mul" value="A" /><label for="A"><span class="item">A</span>@Model.Question.A</label></div>
<div><input type="checkbox" id="B" name="mul" value="B" /><label for="B"><span class="item">B</span>@Model.Question.B</label></div>
<div><input type="checkbox" id="C" name="mul" value="C" /><label for="C"><span class="item">C</span>@Model.Question.C</label></div>
<div><input type="checkbox" id="D" name="mul" value="D" /><label for="D"><span class="item">D</span>@Model.Question.D</label></div>
}
else
{
<div><input type="radio" id="A" name="jul" value="@Model.Question.A" /><label for="A"><span class="item"></span>@Model.Question.A</label></div>
<div><input type="radio" id="B" name="jul" value="@Model.Question.B" /><label for="B"><span class="item"></span>@Model.Question.B</label></div>
}
</div>
jquery代码:
$(".items input").click(function () {
var answer = "";
if (type == "单选") {
answer = $(":radio[name=sin]:checked").val();
alert(answer);
} else if (type == "多选") {
$(":checkbox[name=mul]:checked").each(function () {
answer += $(this).val() + ",";
});
} else {
answer = $("input:radio[name=jul]:checked").val();
}
$.post("/home/clickItem", { questionId: '@Model.Question.id', userAnswer: answer }, function (data) {
if (data != "ok") {
alert(data);
location.href = "/home/login";
}
});
});
radio 好取,只要取 :checked 选中的值,checkbox 可能是多选,需要循环取值
2、赋值
赋值可不能这样 $(":radio").val("B"),这种是不行的,使用数组的方式赋值,应该这样 $(":radio").val(["B"]) ,$(":checkbox").val(["A","C","D"]),
if (type == "单选") {
$(":radio[name=sin]").val([useranswer]);
} else if (type == "多选") {
var arr = useranswer.substring(, useranswer.length - ).split(","); //useranswer="B,C,D"这种形式转成数组
$(":checkbox[name=mul]").val(arr);
} else {
answer = $(":radio[name=jul]").val([useranswer]);
}
jQuery 获取和设置radio 和 checkbox 值的操作的更多相关文章
- JQuery获取与设置HTML元素的值value
JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...
- js / jquery 获取和设置 FCK Editor 的值
开发中遇到 通过 $("#content").val(); 或者 document.getElementById("content"); 并不能获取到 id 为 ...
- jquery】常用的jquery获取表单对象的属性与值
[jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...
- Jquery获取select选中的文本与值
jquery获取select选择的文本与值获取select :获取select 选中的 text : $("#ddlregtype").find("option:s ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- jquery获取select选择的文本与值
jquery获取select选择的文本与值获取select :获取select 选中的 text : $("#ddlregtype").find("option:s ...
- Jquery获取select option动态添加自定义属性值失效
Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/3909 ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- js&jquery 获取select下拉框的值、文本内容、自定义属性
js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...
随机推荐
- 20155327 嵌入式C语言课堂补交
嵌入式C语言 题目要求 在作业本上完成附图作业,要认真看题目要求. 提交作业截图 作弊本学期成绩清零(有雷同的,不管是给别人传答案,还是找别人要答案都清零) 题目分析 分析一:提取插入时间 根据老师上 ...
- 实验一:实现求正整数1-N之间所有质数的功能,并进行测试。
实验一 Java开发环境的熟悉(Linux + Eclipse) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 命令行下的程序开 ...
- WPF中Popup控件在Win7以及Win10等中的对齐点方式不一样的解决方案 - 简书
原文:WPF中Popup控件在Win7以及Win10等中的对齐点方式不一样的解决方案 - 简书 最近项目中使用弹出控件Popup,发现弹出框的对齐方式在不同的系统中存在不同(Popup在win10上是 ...
- asp.net core webapi项目配置全局路由
0.目录 整体架构目录:ASP.NET Core分布式项目实战-目录 一.前言 在开发项目的过程中,我新创建了一个controller,发现vs会给我们直接在controller头添加前缀,比如[Ro ...
- Openwrt之移动硬盘ext3/ext4格式化工具
在给openwrt挂载移动硬盘的时候,最好是ext3/ext4方式,但在windows下苦于无法找到合适的工具进行格式化. 踅摸了半天,终于找到了它:MiniTool Partion Wizard ...
- Phaser3 场景Scene之间的传值 -- HTML JAVASCRIPT 网页游戏开发
PHASERJS3 一.首先当然得有至少有二个场景sceneA.js,sceneB.js 二.从场景A传值到场景B二种方法 1)通过事件this.events.emit('event key',{ ...
- Mybatis利用拦截器做统一分页
mybatis利用拦截器做统一分页 查询传递Page参数,或者传递继承Page的对象参数.拦截器查询记录之后,通过改造查询sql获取总记录数.赋值Page对象,返回. 示例项目:https://git ...
- 启动sshd时,报“Could not load host key”错
原文发表于cu:2016-05-24 现象:启动sshd服务时,虽看似服务启动成功,但客户端并不能连接上sshd服务器端.如下: [root@aefe8007a17d ~]# /usr/sbin/ss ...
- C++进阶训练——停车收费系统设计
一.简介 经过一段时间的c++基础学习,是时候做一个较为全面的.运用c++功能的较复杂的项目练练手了. 运用软件:Visual Studio (VS). 题目:c++停车收费系统设计(某本编程书进 ...
- 软银集团和共享办公空间公司WeWork在日本成立合资公司
[TechWeb报道]7月18日消息,据国外媒体报道,软银集团和共享办公空间公司WeWork联合宣布,在日本成立合资公司WeWork Japan. 该合资公司将在日本开设联合办公空间,于明年初在东京设 ...