Expand|Select|Wrap|Line Numbers
- var inputs;
- var imgFalse = "styles/1stAttempt/imageset/false.gif";
- var imgTrue = "styles/1stAttempt/imageset/true.gif";
- //this function runs when the page is loaded, put all your other onload stuff in here too.
- function init() {
- replaceChecks();
- }
- function replaceChecks() {
- //get all the input fields on the page
- inputs = document.getElementsByTagName('input');
- //cycle trough the input fields
- for(var i=0; i < inputs.length; i++) {
- //check if the input is a checkbox
- if(inputs[i].getAttribute('type') == 'checkbox') {
- //create a new image
- var img = document.createElement('img');
- //check if the checkbox is checked
- if(inputs[i].checked) {
- img.src = imgTrue;
- } else {
- img.src = imgFalse;
- }
- //set image ID and onclick action
- img.id = 'checkImage'+i;
- //set image
- img.onclick = new Function('checkChange('+i+')');
- //place image in front of the checkbox
- inputs[i].parentNode.insertBefore(img, inputs[i]);
- //hide the checkbox
- inputs[i].style.display='none';
- }
- }
- }
- //change the checkbox status and the replacement image
- function checkChange(i) {
- if(inputs[i].checked) {
- inputs[i].checked = '';
- document.getElementById('checkImage'+i).src=imgFalse;
- } else {
- inputs[i].checked = 'checked';
- document.getElementById('checkImage'+i).src=imgTrue;
- }
- }
- window.onload = init;
to intitally change the checkboxes and then switch any single one I click on. (THIS WORKS) It post a new image and hides the original but moves it to the right found this out when I took away the hide code.
For check all I use this script
Expand|Select|Wrap|Line Numbers
- function marklist(id, name, state)
- {
- var parent = document.getElementById(id);
- if (!parent)
- {
- eval('parent = document.' + id);
- }
- if (!parent)
- {
- return;
- }
- var rb = parent.getElementsByTagName('input');
- for (var r = 0; r < rb.length; r++)
- {
- if (rb[r].name.substr(0, name.length) == name)
- {
- rb[r].checked = state;
- }
- }
- }