API tools faq
paste
Advertisement
gitlez

YA: Checkbox Disabling (Follow up question)

gitlez
Jul 22nd, 2011
104
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 9.62 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <!--
  3.         Follow Up Response to yahoo question. http://answers.yahoo.com/question/index?qid=20110721131750AAC7lcv
  4.         Follow Up Question: Checkboxes again but this time disable all others when one is clicked
  5.     -->
  6.     <head>
  7.         <title>Javascript Select All</title>
  8.         <script type="text/javascript" language="Javascript">
  9.             Object.prototype.hasClass = function(class){
  10.                 var hcN = [];
  11.                 var hcL = this.length;
  12.                 var hcI = 0;
  13.                 for(hcX=0;hcX<hcL;++hcX){
  14.                     var hcClass = this[hcX].getAttribute('class') || null;
  15.                     if(hcClass != null && hcClass.indexOf(class) !== (-1)){
  16.                         hcN[hcI++] =this[hcX];
  17.                     }
  18.                 }
  19.                 return hcN;
  20.             }
  21.             Object.prototype.setChecked = function(sCTF){
  22.                 var sCTF = (sCTF === undefined)? true : sCTF;
  23.                 var saL = this.length;
  24.                 for(var saI=0;saI<saL;++saI){
  25.                     if(sCTF === 'invert'){
  26.                         this[saI].checked = (this[saI].checked !== true);
  27.                     }else{
  28.                         this[saI].checked = sCTF;
  29.                     }
  30.                 }
  31.                 return this;
  32.             }
  33.             Object.prototype.setDisabled = function(sDTF){
  34.                 var sDTF = (sDTF === undefined)? true : sDTF;
  35.                 var saL = this.length;
  36.                 for(var saI=0;saI<saL;++saI){
  37.                     if(sDTF === 'checked-other'){
  38.                         this[saI].disabled = (this[saI].checked !== true);
  39.                     }else{
  40.                         this[saI].disabled = sDTF;
  41.                     }
  42.                 }
  43.                 return this;
  44.             }
  45.             Object.prototype.addEvent = function(ev, fn, capture){
  46.                 capture = capture || false;
  47.                 var aeI = this.length;
  48.                 for(var aeX=0;aeX<aeI;++aeX){
  49.                     if(this[aeX].addEventListener){
  50.                         this[aeX].addEventListener(ev, fn, capture);
  51.                     }else if (this[aeX].attachEvent){
  52.                         this[aeX].attachEvent('on'+ev, fn);
  53.                     }else{
  54.                         alert('Cannot attach Event Handler');
  55.                     }
  56.                 }
  57.                 return this;
  58.             }
  59.             Object.prototype.removeEvent = function(ev, fn, capture){
  60.                 capture = capture || false;
  61.                 var aeI = this.length;
  62.                 for(var aeX=0;aeX<aeI;++aeX){
  63.                     if(this[aeX].removeEventListener){
  64.                         this[aeX].removeEventListener(ev, fn, capture);
  65.                     }else if (this[aeX].detachEvent){
  66.                         this[aeX].detachEvent('on'+ev, fn);
  67.                     }else{
  68.                         alert('Cannot detach/remove Event Handler');
  69.                     }
  70.                 }
  71.                 return this;
  72.             }
  73.             Object.prototype.isType = function(itT){
  74.                 if(itT == undefined) { return this;}
  75.                 var itN = [];
  76.                 var itL = this.length;
  77.                 var itI = 0;
  78.                 for(itX=0;itX<itL;++itX){
  79.                     if(this[itX].getAttribute('type') == itT){
  80.                         itN[itI++] = this[itX];
  81.                     }
  82.                 }
  83.                 return itN;
  84.             }
  85.             function cbSelectByClass(classId,cElem){
  86.                 if(cElem.checked){
  87.                     // Get All Input Elements With The Class 'cbOption', then "check" them
  88.                     document.getElementsByTagName('input').hasClass('cbOption').setChecked();
  89.                 }else{
  90.                     // Get All Input Elements With The Class 'cbOption', then "uncheck" them
  91.                     document.getElementsByTagName('input').hasClass('cbOption').setChecked(false);
  92.                 }
  93.             }
  94.             function cbInvert(classId){
  95.                 // Get All Input Elements With The Class 'cbOption', then "invert check" them
  96.                 document.getElementsByTagName('input').hasClass('cbOption').setChecked('invert');
  97.             }
  98.             function cbCheckAllChildren(elemId){
  99.                 var elem = document.getElementById(elemId);
  100.                 if(elem.CBChecked == undefined){
  101.                     elem.CBChecked = true;
  102.                 }else{
  103.                     elem.CBChecked = (elem.CBChecked !== true);
  104.                 }
  105.                 elem.getElementsByTagName('input').setChecked(elem.CBChecked);
  106.             }
  107.            
  108.             window.onload = function(){
  109.                 // Select the Element with the id of 'disableExample', search in that element for 'input' elements, filter out 'input' elements that do not have the type attribute set to 'checkbox'
  110.                 var cb_selection1 = document.getElementById('disableExample').getElementsByTagName('input').isType('checkbox');
  111.                 // Add Event 'click', when the elements are clicked, then run the function. 'this' referes to the element that is clicked.
  112.                 cb_selection1.addEvent('click',function(){
  113.                     if(this.checked){
  114.                         // Set all 'other' elements in the selection, to disabled, if they are not checked.
  115.                         cb_selection1.setDisabled('checked-other');
  116.                     }else{
  117.                         // Set all elements of the selection to not disabled.
  118.                         cb_selection1.setDisabled(false);
  119.                     }
  120.                
  121.                 }, false);
  122.             };
  123.         </script>
  124.     </head>
  125. <body>
  126.     <form>
  127.         <input type="checkbox" id="selectAll" onclick="Javascript: cbSelectByClass('cbOption',this);" /> Select All (By Class)<br />
  128.         <input type="checkbox" id="selectInvert" onclick="Javascript: cbInvert('cbOption');" /> Invert All (By Class)<br />
  129.         <input type="checkbox" name="option1" class="cbOption"> Option 1 <br />
  130.         <input type="checkbox" name="option2" class="cbOption"> Option 2 <br />
  131.         <input type="checkbox" name="option3" class="cbOption"> Option 3 <br />
  132.         <input type="checkbox" name="option4" class="cbOption"> Option 4 <br />
  133.         <input type="checkbox" name="option5" class="cbOption"> Option 5 <br />
  134.         <input type="checkbox" name="option6" class="cbOption"> Option 6 <br />
  135.         <input type="checkbox" name="option7" class="cbOption"> Option 7 <br />
  136.         <input type="checkbox" name="option8" class="cbOption"> Option 8 <br />
  137.     </form>
  138.     Table 1: <a href="#" onclick="Javascript: cbCheckAllChildren('table1'); return false;">Check All Of Table 1</a> | <a href="#" onclick="Javascript: document.getElementById('table1').getElementsByTagName('input').setChecked('invert'); return false;">Invert Table 1</a>
  139.     <table id="table1">
  140.             <tr>
  141.                 <td><input type="checkbox" name="option1"> Option 1 </td>
  142.             </tr>
  143.             <tr>
  144.                 <td><input type="checkbox" name="option2"> Option 2 </td>
  145.             </tr>
  146.             <tr>
  147.                 <td><input type="checkbox" name="option3"> Option 3 </td>
  148.             </tr>
  149.             <tr>
  150.                 <td><input type="checkbox" name="option4"> Option 4 </td>
  151.             </tr>
  152.             <tr>
  153.                 <td><input type="checkbox" name="option5"> Option 5 </td>
  154.             </tr>
  155.             <tr>
  156.                 <td><input type="checkbox" name="option6"> Option 6 </td>
  157.             </tr>
  158.             <tr>
  159.                 <td><input type="checkbox" name="option7"> Option 7 </td>
  160.             </tr>
  161.             <tr>
  162.                 <td><input type="checkbox" name="option8"> Option 8 </td>
  163.             </tr>
  164.     </table>
  165.     Table 2: <a href="#" onclick="Javascript: cbCheckAllChildren('table2'); return false;">Check All Of Table 2</a> | <a href="#" onclick="Javascript: document.getElementById('table2').getElementsByTagName('input').setChecked('invert'); return false;">Invert Table 2</a>
  166.     <table id="table2">
  167.             <tr>
  168.                 <td><input type="checkbox" name="option1"> Option 1 </td>
  169.             </tr>
  170.             <tr>
  171.                 <td><input type="checkbox" name="option2"> Option 2 </td>
  172.             </tr>
  173.             <tr>
  174.                 <td><input type="checkbox" name="option3"> Option 3 </td>
  175.             </tr>
  176.             <tr>
  177.                 <td><input type="checkbox" name="option4"> Option 4 </td>
  178.             </tr>
  179.             <tr>
  180.                 <td><input type="checkbox" name="option5"> Option 5 </td>
  181.             </tr>
  182.             <tr>
  183.                 <td><input type="checkbox" name="option6"> Option 6 </td>
  184.             </tr>
  185.             <tr>
  186.                 <td><input type="checkbox" name="option7"> Option 7 </td>
  187.             </tr>
  188.             <tr>
  189.                 <td><input type="checkbox" name="option8"> Option 8 </td>
  190.             </tr>
  191.     </table>
  192.     <h3>Disable All Other Checks when one is selected</h3>
  193.     <form id="disableExample">
  194.         <input type="checkbox" name="option1"> Option 1 <br />
  195.         <input type="checkbox" name="option2"> Option 2 <br />
  196.         <input type="checkbox" name="option3"> Option 3 <br />
  197.         <input type="checkbox" name="option4"> Option 4 <br />
  198.         <input type="checkbox" name="option5"> Option 5 <br />
  199.         <input type="checkbox" name="option6"> Option 6 <br />
  200.         <input type="checkbox" name="option7"> Option 7 <br />
  201.         <input type="checkbox" name="option8"> Option 8 <br />
  202.         <input type="button" value="Edit" />
  203.     </form>
  204. </body>
  205. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!