»
EnglishFrenchVietnamese

Print - JavaScript OOP with Input Display Toggle - JavaScriptBank.com

Full version: jsB@nk » Form » Textarea » JavaScript OOP with Input Display Toggle
URL: https://www.javascriptbank.com/javascript-oop-with-input-display-toggle.html

JavaScript OOP with Input Display Toggle © JavaScriptBank.comUsage 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's still a good JavaScript code example for JavaScript OOP beginners.

Full version: jsB@nk » Form » Textarea » JavaScript OOP with Input Display Toggle
URL: https://www.javascriptbank.com/javascript-oop-with-input-display-toggle.html



JavaScript
<script type="text/javascript">// Created by: Fang | http://www.webdeveloper.com/forum/showthread.php?p=872326#post872326// This script downloaded from www.JavaScriptBank.comfunction 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>


HTML
<span id="myspan">  <input type="checkbox">  <input type="checkbox">  <input type="checkbox"></span>