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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/form/javascript-oop-with-input-display-toggle.jpg[/IMG]
Demo: JavaScript JavaScript OOP with Input Display Toggle

How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: Fang | hxxp ://w w w.webdeveloper. com/forum/showthread.php?p=872326#post872326
// This script downloaded from w w w.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
// hxxp ://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>





JavaScript Make link open in new tab/window - JavaScript World clock - circumference calculator