API tools faq
paste
Advertisement
gitlez

YA: Checkbox SelectAll/Invert By Class or Children

gitlez
Jul 21st, 2011
334
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.66 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <!-- Response to yahoo question. http://answers.yahoo.com/question/index?qid=20110721131750AAC7lcv -->
  3.     <head>
  4.         <title>Javascript Select All</title>
  5.         <script type="text/javascript" language="Javascript">
  6.             Object.prototype.hasClass = function(class){
  7.                 var hcN = [];
  8.                 var hcL = this.length;
  9.                 var hcI = 0;
  10.                 for(hcX=0;hcX<hcL;++hcX){
  11.                    var hcClass = this[hcX].getAttribute('class') || null;
  12.                    if(hcClass != null && hcClass.indexOf(class) !== (-1)){
  13.                        hcN[hcI++] =this[hcX];
  14.                    }
  15.                }
  16.                return hcN;
  17.            }
  18.            Object.prototype.setChecked = function(sCTF){
  19.                var sCTF = (sCTF === undefined)? true : sCTF;
  20.                var saL = this.length;
  21.                for(var saI=0;saI<saL;++saI){
  22.                    if(sCTF === 'invert'){
  23.                        this[saI].checked = (this[saI].checked !== true);
  24.                    }else{
  25.                        this[saI].checked = sCTF;
  26.                    }
  27.                }
  28.                return this;
  29.            }
  30.            function cbSelectByClass(classId,cElem){
  31.                if(cElem.checked){
  32.                    // Get All Input Elements With The Class 'cbOption', then "check" them
  33.                    document.getElementsByTagName('input').hasClass('cbOption').setChecked();
  34.                }else{
  35.                    // Get All Input Elements With The Class 'cbOption', then "uncheck" them
  36.                    document.getElementsByTagName('input').hasClass('cbOption').setChecked(false);
  37.                }
  38.            }
  39.            function cbInvert(classId){
  40.                // Get All Input Elements With The Class 'cbOption', then "invert check" them
  41.                document.getElementsByTagName('input').hasClass('cbOption').setChecked('invert');
  42.            }
  43.            function cbCheckAllChildren(elemId){
  44.                var elem = document.getElementById(elemId);
  45.                if(elem.CBChecked == undefined){
  46.                    elem.CBChecked = true;
  47.                }else{
  48.                    elem.CBChecked = (elem.CBChecked !== true);
  49.                }
  50.                elem.getElementsByTagName('input').setChecked(elem.CBChecked);
  51.            }
  52.        </script>
  53.     </head>
  54. <body>
  55.     <form>
  56.         <input type="checkbox" id="selectAll" onclick="Javascript: cbSelectByClass('cbOption',this);" /> Select All (By Class)<br />
  57.         <input type="checkbox" id="selectInvert" onclick="Javascript: cbInvert('cbOption');" /> Invert All (By Class)<br />
  58.         <input type="checkbox" name="option1" class="cbOption"> Option 1 <br />
  59.         <input type="checkbox" name="option2" class="cbOption"> Option 2 <br />
  60.         <input type="checkbox" name="option3" class="cbOption"> Option 3 <br />
  61.         <input type="checkbox" name="option4" class="cbOption"> Option 4 <br />
  62.         <input type="checkbox" name="option5" class="cbOption"> Option 5 <br />
  63.         <input type="checkbox" name="option6" class="cbOption"> Option 6 <br />
  64.         <input type="checkbox" name="option7" class="cbOption"> Option 7 <br />
  65.         <input type="checkbox" name="option8" class="cbOption"> Option 8 <br />
  66.     </form>
  67.     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>
  68.     <table id="table1">
  69.             <tr>
  70.                 <td><input type="checkbox" name="option1"> Option 1 </td>
  71.             </tr>
  72.             <tr>
  73.                 <td><input type="checkbox" name="option2"> Option 2 </td>
  74.             </tr>
  75.             <tr>
  76.                 <td><input type="checkbox" name="option3"> Option 3 </td>
  77.             </tr>
  78.             <tr>
  79.                 <td><input type="checkbox" name="option4"> Option 4 </td>
  80.             </tr>
  81.             <tr>
  82.                 <td><input type="checkbox" name="option5"> Option 5 </td>
  83.             </tr>
  84.             <tr>
  85.                 <td><input type="checkbox" name="option6"> Option 6 </td>
  86.             </tr>
  87.             <tr>
  88.                 <td><input type="checkbox" name="option7"> Option 7 </td>
  89.             </tr>
  90.             <tr>
  91.                 <td><input type="checkbox" name="option8"> Option 8 </td>
  92.             </tr>
  93.     </table>
  94.     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>
  95.     <table id="table2">
  96.             <tr>
  97.                 <td><input type="checkbox" name="option1"> Option 1 </td>
  98.             </tr>
  99.             <tr>
  100.                 <td><input type="checkbox" name="option2"> Option 2 </td>
  101.             </tr>
  102.             <tr>
  103.                 <td><input type="checkbox" name="option3"> Option 3 </td>
  104.             </tr>
  105.             <tr>
  106.                 <td><input type="checkbox" name="option4"> Option 4 </td>
  107.             </tr>
  108.             <tr>
  109.                 <td><input type="checkbox" name="option5"> Option 5 </td>
  110.             </tr>
  111.             <tr>
  112.                 <td><input type="checkbox" name="option6"> Option 6 </td>
  113.             </tr>
  114.             <tr>
  115.                 <td><input type="checkbox" name="option7"> Option 7 </td>
  116.             </tr>
  117.             <tr>
  118.                 <td><input type="checkbox" name="option8"> Option 8 </td>
  119.             </tr>
  120.     </table>
  121. </body>
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!