Skip to content

Instantly share code, notes, and snippets.

@web20opensource

web20opensource/coffeTesting4.html

Last active December 23, 2015 22:29
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/6703673 to your computer and use it in GitHub Desktop.
Save web20opensource/6703673 to your computer and use it in GitHub Desktop.
Download ZIP
magical input checkbox mootools
Raw
coffee.js
/*
*S2-<br>
*S1-checkAll
*S2-input dynamic for price (other)
*
* */
/**
* Created with JetBrains WebStorm.
* User: mario.ruiz
* Date: 12/09/13
* Time: 16:50
* To change this template use File | Settings | File Templates.
*/
window.addEvent('domready', function() {
var colors = [{color:"yellow"},{color:"green"},{color:"red"}];
/*console.log(colors);
console.log(colors[1].color); */
$$('*[id*="S3_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_S3'),'bottom') ;
var isChecked = function(event){
if ( $(this).id == 'forwardbutton' || $(this).id == 'backbutton' || $(this).id == 'S3_12_other')
return;
if ( $(this).id=='S3_8' ){
console.log('clicked');
//event.preventDefault();
if ( $(this).checked )
$$('*[id*=_98]').setStyle('display', 'block');
else
$$('*[id*=_98]').setStyle('display', 'none')
}
else{
if($(this).checked){
$(this.id + '_label').setStyle('color',colors[totalSum%3].color);
totalSum++;
}else{
$(this.id + '_label').setStyle('color','black');
totalSum--;
}
console.log(totalSum);
totalTag.set('html','Total : ' + 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 id="fieldset_S3" style="visibility: visible;"><table cellspacing="0" summary="Answers of S3. Column number 1"><tbody>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_1" name="S3_1" tabindex="1"></td>
<td class="answerlabel"><label id="S3_1_label" for="S3_1" style="cursor: pointer;">Pancakes</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_25" name="S3_25" tabindex="2"></td>
<td class="answerlabel"><label id="S3_25_label" for="S3_25">Cookies</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_23" name="S3_23" tabindex="3"></td>
<td class="answerlabel"><label id="S3_23_label" for="S3_23">Soup</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_26" name="S3_26" tabindex="4"></td>
<td class="answerlabel"><label id="S3_26_label" for="S3_26">Mash potatoes</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_5" name="S3_5" tabindex="5"></td>
<td class="answerlabel"><label id="S3_5_label" for="S3_5">Fruit Salad</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_6" name="S3_6" tabindex="6"></td>
<td class="answerlabel"><label id="S3_6_label" for="S3_6">Cake</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_7" name="S3_7" tabindex="7"></td>
<td class="answerlabel"><label id="S3_7_label" for="S3_7" style="cursor: pointer;">Tea</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_8" name="S3_8" tabindex="8"></td>
<td class="answerlabel"><label id="S3_8_label" for="S3_8" style="cursor: pointer;">Coffee</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_981" name="S3_981" tabindex="9"></td>
<td class="answerlabel"><label id="S3_981_label" for="S3_981">Expresso</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_982" name="S3_982" tabindex="10"></td>
<td class="answerlabel"><label id="S3_982_label" for="S3_982">Latte</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_983" name="S3_983" tabindex="11"></td>
<td class="answerlabel"><label id="S3_983_label" for="S3_983">Capuchino</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_984" name="S3_984" tabindex="12"></td>
<td class="answerlabel"><label id="S3_984_label" for="S3_984">Black</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_81" name="S3_81" tabindex="13"></td>
<td class="answerlabel"><label id="S3_81_label" for="S3_81">Coffee</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_9" name="S3_9" tabindex="14"></td>
<td class="answerlabel"><label id="S3_9_label" for="S3_9">Juice</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_10" name="S3_10" tabindex="15"></td>
<td class="answerlabel"><label id="S3_10_label" for="S3_10">Pasta</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_11" name="S3_11" tabindex="16"></td>
<td class="answerlabel"><label id="S3_11_label" for="S3_11">Salads</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_13" name="S3_13" tabindex="17"></td>
<td class="answerlabel"><label id="S3_13_label" for="S3_13">Tacos</label></td>
</tr>
<tr>
<td class="answer"><input type="checkbox" value="1" id="S3_12" name="S3_12" tabindex="18"></td>
<td class="answerlabel"><label id="S3_12_label" for="S3_12">Other (specify)</label><input type="text" value="" id="S3_12_other" class="othertextfield" name="S3_12_other" tabindex="19" size="15" __oldvalue=""><label id="S3_12_other_label" class="confirmit-offscreen" for="S3_12_other">Other (specify)</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