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 ...
随机推荐
- 20155211 实验三 敏捷开发与XP实践
20155211 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验要求 完成实验.撰写实验报告,实验报告以博客方式发表在博客园. 实验步骤 (一)敏捷开发与XP 敏捷开发( ...
- 20155308&20155316 2017-2018-1 《信息安全系统设计基础》实验三
20155308&20155316 2017-2018-1 <信息安全系统设计基础>实验三 并发程序-1 学习使用Linux命令wc(1) 基于Linux Socket程序设计实现 ...
- 20155325实验四 Android程序设计
实验四 Android程序设计-1 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)&g ...
- 微信小程序:页面跳转时传递数据到另一个页面
一.功能描述 页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示 二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...
- php编程知识点2018
一 .PHP基础部分 1.PHP语言的一大优势是跨平台,什么是跨平台? PHP的运行环境最优搭配为Apache+MySQL+PHP,此运行环境可以在不同操作系统(例如windows.Linux等)上配 ...
- CentOS7安装及配置vsftpd (FTP服务器)
CentOS7安装及配置vsftpd (FTP服务器) 1.安装vsftpd 1 yum -y install vsftpd 2.设置开机启动 1 systemctl enable vsftpd 3. ...
- 二、Web框架实现
一.简单web(socket) 在前一篇WEB框架概述一文中已经详细了解了:从浏览器键入一个URL到返回HTML内容的整个过程.说到底,本质上其实就是一个socket服务端,用户的浏览器其实就是一个s ...
- javaweb(十)——HttpServletRequest对象(一)
一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...
- Python的sys.argv使用说明
刚开始使用这个参数的时候,很不明白其含义.网上搜索很多都是贴的官网上面的一则实例,说看懂,就明白.可是,我看不懂.现在在回头看这个参数使用,并不是很麻烦. 举几个小例子就明白了. 创建一个脚本,内容如 ...
- MySQL 中的数据类型介绍
1.MySQL 数据类型 MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 2.数值类型(12) 2.1. ...