Usage of this JavaScript code effect is just toggle (show/display) the input text fields when the users click the specified input checkboxes. But this JavaScript code example made with OOP skills, it'...
detail at
JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: Fang | http://www.webdeveloper.com/forum/showthread.php?p=872326#post872326
// This script downloaded from www.JavaScriptBank.com
function addElement() {
var aInput=document.getElementById('myspan').getElementsByTagName('input');
for(var i=0; i<aInput.length; i++) {
aInput[i].onclick=new Function('addDelete(this)');
}
}
function addDelete(obj) {
var parentSpan=document.getElementById('myspan');
if(obj.nextSibling.nodeName!='INPUT') { // add
var oInputText=document.createElement('input');
oInputText.setAttribute('type', 'text');
parentSpan.insertBefore(oInputText, obj.nextSibling);
}
else { // delete
parentSpan.removeChild(obj.nextSibling);
}
}
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
addElement();
});
</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
<span id="myspan">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</span>