问题:
table里面的tr结构是这样的,一个tr表示一道问卷的题目<tr>
<td>
<strong>6、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n1" id="r1"><label for="r1">正确</label></li>
<li><input type="radio" name="n1" id="r2"><label for="r2">错误</label></li>
</ul>
</td>
</tr>需要用JavaScript(原生或者jQuery都行)实现以下算法和功能:
页面中有很多个这样的tr,每一个表示一道题目,我在正确答案的li上挂了一个名为right的class类,用于表示其为题目的正确答案,当我把整份问卷填写完成后:
1、首先判断用户是否选择完里面的所有题目了,如果没有则弹出提示框提示用户第几道题没有选择,并且阻止表单的提交
2、如果用户都选择完毕了,则开始计算分数,选择正确的每题5分,最终根据总分弹出一个层(这个我可以自己弄)向用户显示信息,例如:
0~40分弹出“称号1”
40~60分弹出“称号2”
60~80分弹出“称号3”
80~100分弹出“称号4”要求:以上的tr结构不能变,不过可以挂class类或者id
我的js实在很弱,求大神帮忙实现一下算法和程序我可以学习!javascript算法jquery编程
table里面的tr结构是这样的,一个tr表示一道问卷的题目<tr>
<td>
<strong>6、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n1" id="r1"><label for="r1">正确</label></li>
<li><input type="radio" name="n1" id="r2"><label for="r2">错误</label></li>
</ul>
</td>
</tr>需要用JavaScript(原生或者jQuery都行)实现以下算法和功能:
页面中有很多个这样的tr,每一个表示一道题目,我在正确答案的li上挂了一个名为right的class类,用于表示其为题目的正确答案,当我把整份问卷填写完成后:
1、首先判断用户是否选择完里面的所有题目了,如果没有则弹出提示框提示用户第几道题没有选择,并且阻止表单的提交
2、如果用户都选择完毕了,则开始计算分数,选择正确的每题5分,最终根据总分弹出一个层(这个我可以自己弄)向用户显示信息,例如:
0~40分弹出“称号1”
40~60分弹出“称号2”
60~80分弹出“称号3”
80~100分弹出“称号4”要求:以上的tr结构不能变,不过可以挂class类或者id
我的js实在很弱,求大神帮忙实现一下算法和程序我可以学习!javascript算法jquery编程
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
test测试1
</title>
</head>
<body>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<table>
<tbody id="topics">
<tr>
<td>
<strong>1、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n1" id="r11"><label for="r11">正确</label></li>
<li><input type="radio" name="n1" id="r12"><label for="r12">错误</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<strong>2、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n2" id="r21"><label for="r21">正确</label></li>
<li><input type="radio" name="n2" id="r22"><label for="r22">错误</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<strong>3、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n3" id="r31"><label for="r31">正确</label></li>
<li><input type="radio" name="n3" id="r32"><label for="r32">错误</label></li>
</ul>
</td>
</tr>
</tbody>
</table>
<button id="OK">OK</button>
<script>
$(document).ready(function(){
$('#OK').click(function(){
var right = 0 , todo = true;
$('#topics').children().each(function(index){
var obj = $(':radio[name=n'+ (index+1) +']:checked' , $(this));
if(obj.val()){
if(obj.parent().hasClass('right')){
++right;
}
}else{
alert('第'+ (index + 1) +'题目没有做');
todo = false;
}
});
var totalScore = right * 5;
if(totalScore>=0&&totalScore<40){
alert('称号一');
}else if(totalScore>=40&&totalScore<60){
alert('称号二');
}else if(totalScore>=60&&totalScore<80){
alert('称号三');
}else if(totalScore>=80&&totalScore<=100){
alert('称号四');
}
if(todo){
//表单提交
}
});
});
</script>
</html>
<script>
function check() {
var ok = true, input, score = 0;
$('#tb tr').each(function (idx) {
input = $(this).find('input');
if (!input[0].checked && !input[1].checked) { alert('第' + (idx + 1) + '题没做!'); ok = false; return false; }
if (input.filter(':checked').parent().attr('class') == 'right') score += 5;
});
if (ok) {
alert('总分:'+score);
if (score >= 0 && score < 40) alert('称号1');
else if (score >= 40 && score < 60) alert('称号2');
else if (score >= 60 && score < 80) alert('称号3');
else if (score >= 80 && score <= 100) alert('称号4');
}
return false;
}
</script>
<form onsubmit="return check(this)">
<table id="tb"><tr>
<td>
<strong>1、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n1"><label for="r1">正确</label></li>
<li><input type="radio" name="n1"><label for="r2">错误</label></li>
</ul>
</td>
</tr><tr>
<td>
<strong>2、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n2"><label for="r1">正确</label></li>
<li><input type="radio" name="n2"><label for="r2">错误</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<strong>3、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n3"><label for="r1">正确</label></li>
<li><input type="radio" name="n3"><label for="r2">错误</label></li>
</ul>
</td>
</tr></table><input type="submit" value="提交" /></form>
<form id="form1">
<table id="questions">
<tr>
<td>
<strong>1、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n1" id="r1"><label for="r1">正确</label></li>
<li><input type="radio" name="n1" id="r2"><label for="r2">错误</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<strong>2、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n2" id="Radio1"><label for="r1">正确</label></li>
<li><input type="radio" name="n2" id="Radio2"><label for="r2">错误</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<strong>3、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n3" id="Radio3"><label for="r1">正确</label></li>
<li><input type="radio" name="n3" id="Radio4"><label for="r2">错误</label></li>
</ul>
</td>
</tr>
</table>
<button id="submit" type="button">提交</button>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var questionCount = $("#questions tr").length;
document.getElementById("form1").onsubmit = function () {
var nums = [];
$("#questions tr").each(function (i, obj) {
if ($(obj).find(":radio:checked").length == 0) {
nums.push(i + 1);
}
});
if (nums.length > 0) {
alert("第" + nums.join(",") + "题没有选择");
return false;
}
} $("#submit").unbind("click").bind("click", function () {
var nums = $("#questions li.right :radio:checked").length;
var score = nums * 5;
if (score < 40) {
alert("称号1");
}
else if (score >= 40 && score < 60) {
alert("称号2");
}
else if (score >= 60 && score < 80) {
alert("称号3");
} else {
alert("称号4");
}
});
</script>
<table id="questions">
<tr>
<td>
<strong>1、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n1" id="r1"><label for="r1">正确</label></li>
<li><input type="radio" name="n1" id="r2"><label for="r2">错误</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<strong>2、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n2" id="Radio1"><label for="r1">正确</label></li>
<li><input type="radio" name="n2" id="Radio2"><label for="r2">错误</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<strong>3、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n3" id="Radio3"><label for="r1">正确</label></li>
<li><input type="radio" name="n3" id="Radio4"><label for="r2">错误</label></li>
</ul>
</td>
</tr>
</table>
<button id="submit" type="submit">提交</button>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var questionCount = $("#questions tr").length;
document.getElementById("form1").onsubmit = function () {
var nums = [];
$("#questions tr").each(function (i, obj) {
if ($(obj).find(":radio:checked").length == 0) {
nums.push(i + 1);
}
});
if (nums.length > 0) {
alert("第" + nums.join(",") + "题没有选择");
}
return false;
} $("#submit").unbind("click").bind("click", function () {
var nums = $("#questions li.right :radio:checked").length;
var score = nums * 5;
if (score < 40) {
alert("称号1");
}
else if (score >= 40 && score < 60) {
alert("称号2");
}
else if (score >= 60 && score < 80) {
alert("称号3");
} else {
alert("称号4");
}
});
</script>
function check() {
var ans = document.getElementsByTagName('table')[0].getElementsByTagName('input'), countQ = ans.length / 2;
var array = new Array(), total = 0;
for (var i = 0, len = ans.length; i < len; i++) {
if (ans[i].checked) {
ans[i].idx = Math.floor(i / 2) + 1;
array.push(ans[i]);
}
}
if (array.length < countQ) {
var _no = ',';
for (var i = 1; i <= countQ; i++) {
_no += i + ',';
}
for (var i = 0, len = array.length; i < len; i++) {
_no = _no.replace(',' + array[i].idx + ',', ',');
}
_no = _no.substr(1).substr(0, _no.length - 2);
alert('你有以下题目未完成:\n' + _no + '\n请完成后再提交.谢谢!');
return false;
}
for (var i = 0, len = array.length; i < len; i++) {
if (array[i].parentNode.className == 'right') total++;
}
alert('称号' + (total < 8 ? 1 : (d = Math.floor(total / 4)) > 4 ? 4 : d));
return false;
}
</script>
发一个javascript版的
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
table{background-color:#6FC;}
td{width:200px; text-align:center; height:100px; font-size:12px; color:#666;}
td span{font-weight:900; color:#F00;}
</style>
<script type="text/javascript" src="js/Panli.js"></script>
</head><body>
<table>
<tbody id="topics">
<tr>
<td>
<strong>1、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n1" id="r11"><label for="r11">正确</label></li>
<li><input type="radio" name="n1" id="r12"><label for="r12">错误</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<strong>2、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n2" id="r21"><label for="r21">正确</label></li>
<li><input type="radio" name="n2" id="r22"><label for="r22">错误</label></li>
</ul>
</td>
</tr>
<tr>
<td>
<strong>3、正确还是错误?</strong>
<ul>
<li class="right"><input type="radio" name="n3" id="r31"><label for="r31">正确</label></li>
<li><input type="radio" name="n3" id="r32"><label for="r32">错误</label></li>
</ul>
</td>
</tr>
</tbody>
</table>
<input type="button" value="提交" onclick="return scores()"/>
<script type="text/javascript">
function scores() {
var id = document.getElementById('topics'),
ul = id.getElementsByTagName('ul'),
score = 0;
for (var i = 0; i < ul.length; i++) {
var li = ul[i].getElementsByTagName('li'),
boo = true;
for (var j = 0; j < li.length; j++) {
if (li[j].getElementsByTagName('input')[0].checked == true) {
boo = false;
li[j].className == 'right' ? score += 5 : '';
}
};
if (boo) {
alert('请填写第' + (i + 1) + '题');
return false;
}
}
if (score >= 0 && score < 40) alert('称号一');
if (score >=40 && score < 60) alert('称号二');
if (score >=60 && score < 80) alert('称号三');
if (score >= 80 && score < 100) alert('称号四');
return true;
}
</script>
</body>
</html>