jQuery calculation & selecting
Hello
I'm trying to learn jQuery, got me some books: jQuery from novice to the ninja. Trying to learn as much as possible.
I try to do a little calculation app that calculates the merit of elementary school students.
To the effect that students will choose a rating of 18 subject, but two are removed. One can choose between four different grades.
no rating, you get: zero points. A: you get 20 points. B: you get 15 points. C: you get 10 points.
The algorithm: If a student gets to 15 A and three other C so count it out as follows: 15 x 20 = 300 points 3 x 10 = 30 points. A total of 18 topic = 330 points. But two of the smallest value scores must be removed for it to be correct. Thus two of the C-rating. So then, merit rating: 15 x 20 = 300 points 3 x 10 = 30 Points - 2 x of the minimum scores = 2 x 10 = 20 points. The final answer is = 310points.
I do not really know how I should proceed to select all the radio boxes and perform calculations. How should I think and how should I go about it.
I have helped with some html code that is a bit quickly written, hope you bear with the basic html code.
<html>
<head>
<title>Merit rating</title>
<script type='text/javascript' src='jquery-1.4.4.min.js'></script>
<script type='text/javascript' src='script.js'></script>
<link rel="stylesheet" href="test.css" type="text/css" media="screen" charset="utf-8" />
</head>
<body>
<h1>Merit rating is the sum of the 16 best in your grades.</h1>
<p>A: 20 points</p>
<p>B: 15 points</p>
<p>C: 10 points</p>
<p>Not rated: 0 points</p>
<p><strong>The highest score you can get is 320 which means that it has Distinction in all subjects.</strong></p>
<p>Do you have 17 or 18 scores, you remove one or two of the worst grade, your meritis made up of your 16 best scores.</p>
<div id="Grade">
<p><strong>Swedish:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>English:</strong> <input type="radio" name="radClassEnglish" value="20"/>A
<input type="radio" name="radClassEnglish" value="15"/>B
<input type="radio" name="radClassEnglish" value="10"/>C
<input type="radio" name="radClassEnglish" value="0"/>Not rated
</p>
<p><strong>Mathematics:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Religion:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Social Studies:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>History:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Geography:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Chemistry:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Physics:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Biology:</strong><input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Technology:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Picture class:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Home economics:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Music:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Sports and Health:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>HandCraft:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Language:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
<input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<p><strong>Student Choice:</strong> <input type="radio" name="radClass" value="20"/>A
<input type="radio" name="radClass" value="15"/>B
开发者_运维技巧 <input type="radio" name="radClass" value="10"/>C
<input type="radio" name="radClass" value="0"/>Not rated
</p>
<input type="button" id="calcButton" value="Calculate"/><p id="answer"></p>
</div>
</body>
</html>
Live demo: http://jsfiddle.net/gx6TM/1/
$('#calcButton').click(function() {
var sum = 0,
arr = [];
// put the values into an array
$('input:radio:checked', '#Grade').each(function() {
var value = parseInt(this.value, 10);
if ( !isNaN(value) ) { arr.push(value); }
});
// sort the array numerically and ascending
arr.sort(function(a, b) {
return a - b;
});
// delete the first two array items (the lowest two scores)
arr = arr.slice(2);
// calculate the sum
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
// print the sum on the page
$('#answer').text(sum);
});
Note that you also have to set the radio button name attributes so that each radio button group has a distinct name.
加载中,请稍侯......
精彩评论