zedjr Posted August 12, 2011 Share Posted August 12, 2011 AM very confused by this example. Ill make posts beside teh lines i dont get. i left in teh authors comments jsut to be clear those arent mine.function graphicBox(box) { // be unobtrusive if (!document.getElementById) return; - i get this // find the object and its parent obj = document.getElementById(box); - i get this-box is teh checkbox2 object and it is finding its dom id to set to obj parentobj = obj.parentNode; - i dont get this. parentNode would be what?- the form tag? // hide the regular checkbox obj.style.visibility = "hidden"; -i get this- is setting the checkbox from html to invisible.right? // create the image element and set its onclick event img = document.createElement("IMG"); - i dont get the rest as this is when i get totally lost. img.onclick = Toggle; img.src = "unchecked.gif"; // save the checkbox id within the image ID img.id = "img" + box; // display the graphic checkbox parentobj.insertBefore(img,obj);}function Toggle(e) { if (!e) var e=window.event; // find the image ID img = (e.target) ? e.target : e.srcElement; // find the checkbox by removing "img" from the image ID checkid = img.id.substring(3); checkbox = document.getElementById(checkid); // "click" the checkbox checkbox.click(); // display the right image for the clicked or unclicked state if (checkbox.checked) file = "checked.gif"; else file="unchecked.gif"; img.src=file;}//replace the second checkbox with a graphicgraphicBox("check2");<html><head><title>Graphic Checkboxes</title></head><body><h1>Graphic Checkbox Example</h1><form name="form1"><p><input type = "checkbox" name="check1" id="check1">An ordinary checkbox.</p><p><input type = "checkbox" name="check2" id="check2">A graphic checkbox, created with unobtrusive JavaScript.</p></form><script language="JavaScript" type="text/javascript" src="checkbox.js"></script></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted August 12, 2011 Share Posted August 12, 2011 //Defines the function. This function replaces a standard checkbox with custom checkbox image.function graphicBox(box) {//This line is useless. All modern browsers support getElementById, so you can remove this lineif (!document.getElementById) return;//Get a reference to the checkbox that is being replacedobj = document.getElementById(box);//The parentNode is exactly that, the parent of the checkbox. If the checkbox is directly inside the form (which is invalid HTML) then yes it will be a reference to the form. Most often it will be inside a div or fieldset though.//Either way it doesn't really matter what element it is for this script, because it's only used to add the image to the document later on.parentobj = obj.parentNode;//Sets the visibility of the standard checkbox to hidden, making it invisible.obj.style.visibility = "hidden";//Creates a new <img> tagimg = document.createElement("IMG");//Sets the onclick event handler, ie, the function that will run when the image is clickedimg.onclick = Toggle;//Sets the source of the imageimg.src = "unchecked.gif";//Set the id of the imageimg.id = "img" + box;//This is where the image gets added to the document. Here is where the parentNode is used. The image is added to the same container (the parentNode) as the standard checkbox.parentobj.insertBefore(img,obj);}//This is the handler that was set in the onclick event of the image.function Toggle(e) {//This checks to see if e is defined (ie, if it is an event object) and if not sets itif (!e) var e=window.event;//Gets a reference to the checkbox image that was clicked, using the target/srcElement property of the event object.img = (e.target) ? e.target : e.srcElement;//Finds the (standard) checkbox id by removing "img" from the image ID, then gets the reference to the (standard) checkbox using that idcheckid = img.id.substring(3);checkbox = document.getElementById(checkid);// Calls the click() method of the checkbox, simulating a mouse clickcheckbox.click();//Change the image's source to reflect the checked or unchecked state of the checkboxif (checkbox.checked) file = "checked.gif";else file="unchecked.gif";img.src=file;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.