Replace checkboxes with images

[Lostmind]

I am not a java expert, I am probably lower then a newbie. Here it goes, I am working with phpbb and java. My goal is to replace the checkboxes that are used by phpbb3 software. I am using this program

 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;

(This is not my code it is open source)
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

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;
		}
	}
}

Then run the first script. What occurs is that it makes another row of images and it does it everytime I press the button. I know it does this because it moves the original checkbox over but I am not sure how to fix the problem. Anyone have any ideas that they would care to devulge. Thank you in advance.

[JosAH]

What you're showing us is Javascript, not Java. The two languages have almost
nothing in common, no matter their names. I'll move your question over to the
Javascript forum. Good luck.

kind regards,

Jos

[acoder]

Can you show how you call the marklist function?

PS. Changed the thread title to better describe the problem.

[Lostmind]

Can you show how you call the marklist function?

PS. Changed the thread title to better describe the problem.

Thank you for the title change, that does explain better of what I am looking for.

The code I use to call marklist function is:

<b class="gensmall"><a href="javascript:marklist('viewfolder', 'marked_msg_id', true); replaceChecks();">{L_MARK_ALL}</a> :: <a href="javascript:marklist('viewfolder', 'marked_msg_id', false); replaceChecks();">{L_UNMARK_ALL}

Again thank you for looking.

[acoder]

What occurs is that it makes another row of images and it does it everytime I press the button. I know it does this because it moves the original checkbox over but I am not sure how to fix the problem.

How are checkboxes laid out on the page? A link to a test page would be useful. If not, some HTML markup will do.

[Lostmind]

Most phpbb forums are about the same mine is www.44057online.com/phpbb3/

The checkboxes are always in a single column and associated with individual rows. It doesn't matter if you are looking at messages in someones inbox or a list of members. The checkboxes are always the same. The site offers more then one background style for the users and the checkboxes are all identical. But for this one style I want to change the checkboxes to match the style but not effect the rest of the styles.

I am not sure what you mean by wanting markup. I hope this info will help.

[acoder]

Then run the first script. What occurs is that it makes another row of images and it does it everytime I press the button. I know it does this because it moves the original checkbox over but I am not sure how to fix the problem.

It makes another row of images because the code doesn't replace the checkbox, but just adds an image for each checkbox and hides the checkbox. The checkbox is still there so when you run the code again, it creates another image and hides the already hidden checkbox.

You will need to modify the code to avoid adding images each time and change the src of the image instead.

[Lostmind]

It makes another row of images because the code doesn't replace the checkbox, but just adds an image for each checkbox and hides the checkbox. The checkbox is still there so when you run the code again, it creates another image and hides the already hidden checkbox.

You will need to modify the code to avoid adding images each time and change the src of the image instead.

Do you have any suggestions?

[acoder]

Something like this:[CODE=javascript]function updateCheckImag e() {

//get all the input fields on the page
inputs = document.getEle mentsByTagName( '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') {

//get image
var img = document.getEle mentById('check Image'+i);

//check if the checkbox is checked
if(inputs[i].checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}
}
}
}[/CODE]

[Lostmind]

acoder,

Thank you for all your help. Once I figured the best place for the code. It worked like a champ.

[acoder]

You're welcome. I'm glad you got it working as you wanted. Post again to the forum if you have any more JavaScript questions.