简单的easyui应用，主要涉及checkbox

最新推荐文章于 2022-08-24 15:52:19 发布

football98

最新推荐文章于 2022-08-24 15:52:19 发布

阅读量3.9k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/football98/article/details/52698662

版权

Web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学习测试</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo/demo.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript">
var json = [{
"type":"单选题",
"title":"申请复核或者提出申诉、再申诉的时效期间为（）日。",
"rightAnswer":"C",
"answer":[{
"A":"A",
"B":"A、15天"
},{
"A":"B",
"B":"B、20天"
},{
"A":"C",
"B":"C、30天"
},{
"A":"D",
"B":"D、60天"
}]
},{
"type":"单选题",
"title":"初次就业的工作人员与事业单位订立的聘用合同期限3年以上的，试用期为（）。",
"rightAnswer":"A",
"answer":[{
"A":"A",
"B":"A、12个月"
},{
"A":"B",
"B":"B、6个月"
},{
"A":"C",
"B":"C、3个月"
},{
"A":"D",
"B":"D、2个月"
}]
}] ;

var obj = eval(json);

function start(){
//初始化结果
$("#sumAnswer").textbox('setValue',"0");
$("#yesAnswer").textbox('setValue',"0");
$("#noAnswer").textbox('setValue',"0");
//加载题目，赋值
$("#type").textbox('setValue',obj[0].type);
$("#title").textbox('setValue',obj[0].title);
$("#rightAnswer").val(obj[0].rightAnswer);
var arr = obj[0].answer;
var checkbox = '';
$.each(arr,function(n,answer) {
checkbox = checkbox + '<input type="checkbox" name="answer" value="'+answer.A+'" />'+answer.B+'<br />'
});
$("#checkbox").empty();
$('#checkbox').append(checkbox);
$.messager.show({
title: '系统消息',
msg:'开始答题！'
});
}

function save(){
var sum = $("#sumAnswer").textbox('getValue');
//判断是否到99,100
if(sum=="99"){
//仅仅更改结果，清除题目
$("#sumAnswer").textbox('setValue',parseInt(sum)+1);
//获取选中的答案
var an = "";
$("input[name='answer']:checked").each(function(){
an = an + $(this).val();
});

//判断答案是否正确
if( $("#rightAnswer").val()==an){
var yes = $("#yesAnswer").textbox('getValue');
$("#yesAnswer").textbox('setValue',parseInt(yes)+1);
}else{
var no = $("#noAnswer").textbox('getValue');
$("#noAnswer").textbox('setValue',parseInt(no)+1);
}
//清除题目

}else if(sum=="100"){
//提示答题完成
$.messager.show({
title: '系统消息',
msg:'答题已结束！'
});
}else{
$("#sumAnswer").textbox('setValue',parseInt(sum)+1);
//获取选中的答案
var an = "";
$("input[name='answer']:checked").each(function(){
an = an + $(this).val();
});

//判断答案是否正确
if( $("#rightAnswer").val()==an){
var yes = $("#yesAnswer").textbox('getValue');
$("#yesAnswer").textbox('setValue',parseInt(yes)+1);
}else{
var no = $("#noAnswer").textbox('getValue');
$("#noAnswer").textbox('setValue',parseInt(no)+1);
}
//加载题目
$("#type").textbox('setValue',obj[1].type);
$("#title").textbox('setValue',obj[1].title);
$("#rightAnswer").val(obj[1].rightAnswer);
var arr = obj[1].answer;
var checkbox = '';
$.each(arr,function(n,answer) {
checkbox = checkbox + '<input type="checkbox" name="answer" value="'+answer.A+'" />'+answer.B+'<br />'
});
$("#checkbox").empty();
$('#checkbox').append(checkbox);
}

}
</script>
</head>
<body>
<h2>学习测试</h2>
<p>加油！！！</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:800px;padding:30px 60px;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" οnclick="start()" style="height:32px">开始答题</a>
数量：<input id="sumAnswer" name="sumAnswer" class="easyui-textbox" style="width:100px;height:32px" value="">
正确：<input id="yesAnswer" name="yesAnswer" class="easyui-textbox" style="width:100px;height:32px" value="">
错误：<input id="noAnswer" name="noAnswer" class="easyui-textbox" style="width:100px;height:32px" value="">
</div>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="题目" style="width:800px;padding:30px 60px">
<div style="margin-bottom:20px">
<div style="margin-bottom:10px">题目类型:</div>
<input id="type" name="type" class="easyui-textbox" style="width:100%;height:32px" value="多选题" >
</div>
<div style="margin-bottom:20px">
<div style="margin-bottom:10px">题目:</div>
<input id="title" name="title" class="easyui-textbox" style="width:100%;height:32px" value="对事业单位工作人员的奖励有（）">
</div>
<div style="margin-bottom:20px">
<div style="margin-bottom:10px">答案:</div>
<div id="checkbox" name="checkbox" style="margin-bottom:10px">
<input type="checkbox" name="answer" value="A" />A、嘉奖<br />
<input type="checkbox" name="answer" value="B" />B、记功<br />
<input type="checkbox" name="answer" value="C" />C、记大功<br />
<input type="checkbox" name="answer" value="D" />D、授予荣誉称号<br />
</div>

<input id="rightAnswer" name="rightAnswer" type="hidden" value='C'/>
</div>
<div>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="width:100%;height:32px" οnclick="save()" >保存</a>
</div>
</div>
</body>
</html>

football98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的easyui应用，主要涉及checkbox

学习测试 var json = [{"type":"单选题","title":"申请复核或者提出申诉、再申诉的时效期间为（）日。","rightAnswer":"C","answer":[{ "A":"A","B":"A、15天"},{ "A":"B","B":"B、20天"},{ "A":"C",
复制链接

扫一扫