簡單的easyui應用,主要涉及checkbox

<!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>
發佈了34 篇原創文章 · 獲贊 6 · 訪問量 18萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章