Skip to content

Instantly share code, notes, and snippets.

@web20opensource

web20opensource/coffeTesting4.html

Last active December 23, 2015 22:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save web20opensource/6705478 to your computer and use it in GitHub Desktop.
Save web20opensource/6705478 to your computer and use it in GitHub Desktop.
Download ZIP
mootools magic checkbox input validation checked.
Raw
coffee.js
window.addEvent('domready', function() {
$$('*[id*="S1_98"]').each(function(e){e.style['display']='none';});
$$('input').each(function(input){
input.checked = false;
});
var totalTag = new Element('label', {
'id': 'totalTag',
'html': 'Total : 0',
'styles': {
'background': 'yellow',
'color': 'black'
}
});
var totalSum = 0;
totalTag.inject($('fieldset_S1'),'bottom') ;
var restFromSum = function(elems){
$$(elems).each(function(input){
if (input.checked){
input.checked=false;
totalSum--;
totalTag.set('html','Total : ' + totalSum);
}
});
};
var isChecked = function(event){
var checkedItems = 0;
if ( $(this).id == 'forwardbutton' || $(this).id == 'backbutton')
return;
if ( $(this).id=='S1_8' ){
window.console && console.log('clicked');
//event.preventDefault();
if ( $(this).checked )
$$('*[id*=_98]').setStyle('display', 'block');
else{
$$('*[id*=_98]').setStyle('display', 'none')
restFromSum('*[id*=_98]');
}
}
else{
$(this).checked ? totalSum++ : totalSum--;
//console.log(totalSum);
totalTag.set('html','Total : ' + totalSum);
}
window.console && console.log (totalSum);
};
$$('input').addEvent('click',isChecked);
});
Raw
coffeTesting4.html
<!DOCTYPE html>
<html>
<head>
<script src="http://mootools.net/download/get/mootools-core-1.4.5-full-compat-yc.js"></script>
<script src="coffee.js"></script>
<title></title>
<style>
*[id*="S1_98"]{
display:none;
}
</style>
</head>
<body>
<div class="answers">
<fieldset style="visibility: visible;" id="fieldset_S1"><table summary="Answers of S1. Column number 1" cellspacing="0"><tbody>
<tr>
<td class="answer"><input tabindex="1" name="S1_1" id="S1_1" value="1" type="checkbox"></td>
<td class="answerlabel"><label for="S1_1" id="S1_1_label">Pancakes</label></td>
</tr>
<tr>
<td class="answer"><input tabindex="2" name="S1_2" id="S1_2" value="1" type="checkbox"></td>
<td class="answerlabel"><label for="S1_2" id="S1_2_label">Putatoes</label></td>
</tr>
<tr>
<td class="answer"><input tabindex="3" name="S1_3" id="S1_3" value="1" type="checkbox"></td>
<td class="answerlabel"><label for="S1_3" id="S1_3_label">Cerials</label></td>
</tr>
<tr>
<td class="answer"><input tabindex="4" name="S1_5" id="S1_5" value="1" type="checkbox"></td>
<td class="answerlabel"><label for="S1_5" id="S1_5_label">Fruit Salad</label></td>
</tr>
<tr>
<td class="answer"><input tabindex="5" name="S1_6" id="S1_6" value="1" type="checkbox"></td>
<td class="answerlabel"><label for="S1_6" id="S1_6_label">Cake</label></td>
</tr>
<tr>
<td class="answer"><input tabindex="6" name="S1_7" id="S1_7" value="1" type="checkbox"></td>
<td class="answerlabel"><label for="S1_7" id="S1_7_label">Tea</label></td>
</tr>
<tr>
<td class="answer"><input tabindex="7" name="S1_8" id="S1_8" value="1" type="checkbox"></td>
<td class="answerlabel"><label for="S1_8" id="S1_8_label">Coffee</label></td>
</tr>
<tr>
<td class="answer"><input style="display: block;" tabindex="8" name="S1_981" id="S1_981" value="1" type="checkbox"></td>
<td class="answerlabel"><label style="display: block;" for="S1_981" id="S1_981_label">Expresso</label></td>
</tr>
<tr>
<td class="answer"><input style="display: block;" tabindex="9" name="S1_982" id="S1_982" value="1" type="checkbox"></td>
<td class="answerlabel"><label style="display: block;" for="S1_982" id="S1_982_label">Latte</label></td>
</tr>
<tr>
<td class="answer"><input style="display: block;" tabindex="10" name="S1_983" id="S1_983" value="1" type="checkbox"></td>
<td class="answerlabel"><label style="cursor: pointer; display: block;" for="S1_983" id="S1_983_label">Capuchino</label></td>
</tr>
<tr>
<td class="answer"><input style="display: block;" tabindex="11" name="S1_984" id="S1_984" value="1" type="checkbox"></td>
<td class="answerlabel"><label style="display: block;" for="S1_984" id="S1_984_label">Black</label></td>
</tr>
<tr>
<td class="answer"><input tabindex="12" name="S1_9" id="S1_9" value="1" type="checkbox"></td>
<td class="answerlabel"><label for="S1_9" id="S1_9_label">Juice</label></td>
</tr>
<tr>
<td class="answer"><input tabindex="13" name="S1_10" id="S1_10" value="1" type="checkbox"></td>
<td class="answerlabel"><label for="S1_10" id="S1_10_label">Pasta</label></td>
</tr>
<tr>
<td class="answer"><input tabindex="14" name="S1_11" id="S1_11" value="1" type="checkbox"></td>
<td class="answerlabel"><label for="S1_11" id="S1_11_label">Salads</label></td>
</tr>
</tbody></table>
</fieldset>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment