By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,435 Members | 2,939 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,435 IT Pros & Developers. It's quick & easy.

Replace checkboxes with images

P: 5
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
Expand|Select|Wrap|Line Numbers
  1.  var inputs;
  2. var imgFalse = "styles/1stAttempt/imageset/false.gif";
  3. var imgTrue = "styles/1stAttempt/imageset/true.gif";
  4.  
  5. //this function runs when the page is loaded, put all your other onload stuff in here too.
  6. function init() {
  7.     replaceChecks();
  8. }
  9.  
  10. function replaceChecks() {
  11.  
  12.     //get all the input fields on the page
  13.     inputs = document.getElementsByTagName('input');
  14.  
  15.     //cycle trough the input fields
  16.     for(var i=0; i < inputs.length; i++) {
  17.  
  18.         //check if the input is a checkbox
  19.         if(inputs[i].getAttribute('type') == 'checkbox') { 
  20.  
  21.  
  22.             //create a new image
  23.             var img = document.createElement('img');
  24.  
  25.             //check if the checkbox is checked
  26.             if(inputs[i].checked) {
  27.                 img.src = imgTrue;
  28.             } else {
  29.                 img.src = imgFalse;
  30.             }
  31.  
  32.             //set image ID and onclick action
  33.             img.id = 'checkImage'+i;
  34.             //set image 
  35.             img.onclick = new Function('checkChange('+i+')');
  36.             //place image in front of the checkbox
  37.             inputs[i].parentNode.insertBefore(img, inputs[i]);
  38.  
  39.             //hide the checkbox
  40.             inputs[i].style.display='none';
  41.         }
  42.     }
  43. }
  44.  
  45. //change the checkbox status and the replacement image
  46. function checkChange(i) {
  47.  
  48.     if(inputs[i].checked) {
  49.         inputs[i].checked = '';
  50.         document.getElementById('checkImage'+i).src=imgFalse;
  51.     } else {
  52.         inputs[i].checked = 'checked';
  53.         document.getElementById('checkImage'+i).src=imgTrue;
  54.     }
  55. }
  56.  
  57. 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
Expand|Select|Wrap|Line Numbers
  1. function marklist(id, name, state)
  2. {
  3.     var parent = document.getElementById(id);
  4.     if (!parent)
  5.     {
  6.         eval('parent = document.' + id);
  7.     }
  8.  
  9.     if (!parent)
  10.     {
  11.         return;
  12.     }
  13.  
  14.     var rb = parent.getElementsByTagName('input');
  15.  
  16.     for (var r = 0; r < rb.length; r++)
  17.     {
  18.         if (rb[r].name.substr(0, name.length) == name)
  19.         {
  20.             rb[r].checked = state;
  21.         }
  22.     }
  23. }
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.
Jan 12 '08 #1
Share this Question
Share on Google+
10 Replies


Expert 10K+
P: 11,448
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
Jan 12 '08 #2

acoder
Expert Mod 15k+
P: 16,027
Can you show how you call the marklist function?

PS. Changed the thread title to better describe the problem.
Jan 13 '08 #3

P: 5
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:
Expand|Select|Wrap|Line Numbers
  1. <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.
Jan 13 '08 #4

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 14 '08 #5

P: 5
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.
Jan 15 '08 #6

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 16 '08 #7

P: 5
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?
Jan 16 '08 #8

acoder
Expert Mod 15k+
P: 16,027
Something like this:
Expand|Select|Wrap|Line Numbers
  1. function updateCheckImage() {
  2.  
  3.     //get all the input fields on the page
  4.     inputs = document.getElementsByTagName('input');
  5.  
  6.     //cycle trough the input fields
  7.     for(var i=0; i < inputs.length; i++) {
  8.  
  9.         //check if the input is a checkbox
  10.         if(inputs[i].getAttribute('type') == 'checkbox') { 
  11.  
  12.             //get image
  13.             var img = document.getElementById('checkImage'+i);
  14.  
  15.             //check if the checkbox is checked
  16.             if(inputs[i].checked) {
  17.                 img.src = imgTrue;
  18.             } else {
  19.                 img.src = imgFalse;
  20.             }
  21.         }
  22.     }
  23. }
Jan 16 '08 #9

P: 5
acoder,

Thank you for all your help. Once I figured the best place for the code. It worked like a champ.
Jan 16 '08 #10

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 17 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.