API tools faq
paste
Advertisement
Guest User

Multi-seletion in JavaScript

a guest
Oct 2nd, 2022
30
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.88 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Multi-selection in JavaScript</title>
  5.  
  6.     <!-- the viewport meta tag magnifies the page on mobile browsers to make it useable there -->
  7.     <meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
  8.  
  9. <style type="text/css">
  10. body {
  11. /* dark theme */ background-color:#343; color:#ddd;
  12. /* modern font pack */ font-family: ubuntu,'noto sans','open sans', calibri, 'segoe ui', 'trebuchet ms', arial, helvetica, verdana, tahoma, 'Bitstream Vera Sans', 'sans-serif';
  13. }
  14. a { color: lightblue; }
  15.  
  16. /* prevent buttons from sticking to each other */
  17. button { margin-top: 1em; }
  18.  
  19. /* Initially grey out containers that are only meant to be shown with JavaScript activated, in order to provide a preview. */
  20. JS_show { opacity:0.2; pointer-events:none; }
  21.     /* for completely hiding it if preferred, use: JS_show { display: none; } */
  22.  
  23. </style>
  24.  
  25. </head>
  26.  
  27. <body>
  28. <JS_show>
  29. <button class="range_selector" onclick="MultiSelect.select_all(0);">Select all</button>
  30. <button class="range_selector" onclick="MultiSelect.select_none(0);">Select none</button>
  31. <button class="range_selector" onclick="MultiSelect.invert_selection(0);">Invert selection</button>
  32.     <!-- This checks all unchecked boxes and unchecks all checked boxes.  -->
  33. &nbsp;&nbsp;
  34. <button class="range_selector" onclick="MultiSelect.select_range(0);">Select range</button>
  35. <button class="range_selector" onclick="MultiSelect.zebra_select(0);">Zebra select</button>
  36. <!--
  37. "Select range" does select all items between the first and last selected one. First known to be used in the early 2010s by ES File Explorer, a file manager for the Android mobile operating system.
  38.  
  39. "Zebra select" alternately selects ranges of checked boxes. This allows selecting multiple ranges of items.
  40. -->
  41. <br />
  42.  
  43. <form style="column-width:160px;">
  44.   <!-- Note: the "id", "name", and "value" parameters have no effect on the behaviour of the buttons. -->
  45.   <input type="checkbox" id="item1" name="item1" value="1">
  46.   <label for="item1">Item 1</label><br>
  47. </form>
  48. </JS_show>
  49.  
  50. <noscript>
  51.     <!-- This guidance is shown if JavaScript is not available in the user's browser. -->
  52.     <h2>JavaScript is unavailable</h2>
  53.     <p>To mass-select check boxes, please activate JavaScript or use a web browser that supports it.</p>
  54.     <p>If you are seeing this error in the Android HTML viewer, enter the path to this HTML file into the address bar of the web browser.</p>
  55. </noscript>
  56.  
  57. <script type="text/javascript">
  58.     // reveals "JS_show" containers
  59. if ( document.getElementsByTagName("JS_show")[0] ) /* check if JS_show containers exist */ {
  60.     for (
  61.         count=0; // initiate counter
  62.         count < document.getElementsByTagName("JS_show").length; // count JS_show containers
  63.         count++ // count up. Same as count+=1 and count=count+1.
  64.     ) {
  65.         // restore opacity and/or unhide by overriding CSS at the top using inline CSS:
  66.         document.getElementsByTagName("JS_show")[count].setAttribute("style","display:block; opacity:1; pointer-events:all;");
  67.     }
  68. }
  69.  
  70. // == generate check boxes before running code ==
  71. var main_form=document.getElementsByTagName("form")[0]; // shortcut variable
  72. var checkbox_count=0; // defeating JS Hint error; no functional difference
  73. for (
  74.     checkbox_count=2; // start at the second check box; the first already is already in the HTML for preview to non-JavaScript users
  75.     checkbox_count <= 24; // add check boxes until there are 24.
  76.     checkbox_count++ // count up
  77. ) {
  78. // create element (does not matter which)
  79. main_form.appendChild(document.createElement("span"));
  80.  
  81. // add next box through HTML string
  82. main_form.lastElementChild.outerHTML='\n  <input type="checkbox" id="item'+checkbox_count+'" name="item'+checkbox_count+'" value="'+checkbox_count+'">\n  <label for="item'+checkbox_count+'">Item '+checkbox_count+'</label><br />';
  83. }
  84.  
  85. // == main code ==
  86.  
  87. var count=0; // Declaring variable for "for" loops to defeat JS Hint error; no functional difference.
  88.  
  89. var MultiSelect = {}; // main object
  90.  
  91. MultiSelect.select_form = function(form_number) {
  92.     MultiSelect.current_boxes=document.getElementsByTagName("form")[form_number].getElementsByTagName("input");
  93.     MultiSelect.number_of_boxes=document.getElementsByTagName("form")[form_number].getElementsByTagName("input").length-1; // correcting off-by-one error since length is shifted up by one.
  94. };
  95.  
  96. MultiSelect.select_range = function(form_number) {
  97.     MultiSelect.select_form(form_number); // select form out of multiple
  98. // find first checked box; prevent overrunning the last box and causing exception if none selected.
  99. MultiSelect.first_checked_box=0;
  100. while (! MultiSelect.current_boxes[MultiSelect.first_checked_box].checked && MultiSelect.first_checked_box < MultiSelect.number_of_boxes) {
  101.     MultiSelect.first_checked_box++;
  102. }
  103.  
  104. // find last checked box by counting down from end
  105. MultiSelect.last_checked_box=MultiSelect.number_of_boxes;
  106. while (! MultiSelect.current_boxes[MultiSelect.last_checked_box].checked && MultiSelect.last_checked_box > 0 ) {
  107.     MultiSelect.last_checked_box--;
  108. }
  109.  
  110. MultiSelect.current_box=MultiSelect.current_boxes[MultiSelect.first_checked_box+1];
  111. for (
  112.     count=MultiSelect.first_checked_box;
  113.     MultiSelect.current_box != MultiSelect.current_boxes[MultiSelect.last_checked_box];
  114.     count++
  115. ) {
  116.     MultiSelect.current_box = MultiSelect.current_boxes[count];
  117.     MultiSelect.current_box.checked = true;
  118. }
  119.  
  120. };
  121.  
  122.  
  123. // select every box
  124. MultiSelect.select_all = function(form_number) {
  125.     MultiSelect.select_form(form_number);
  126.     for (
  127.         count=0;
  128.         count < MultiSelect.number_of_boxes+1;
  129.         count++
  130.     ) { MultiSelect.current_boxes[count].checked=true; }
  131. };
  132.  
  133. // deselect every box
  134. MultiSelect.select_none = function(form_number) {
  135.     MultiSelect.select_form(form_number);
  136.     for (
  137.         count=0;
  138.         count < MultiSelect.number_of_boxes+1;
  139.         count++
  140.     ) { MultiSelect.current_boxes[count].checked=false; }
  141. };
  142.  
  143. // deselect selected boxes, select unselected boxes
  144. MultiSelect.invert_selection = function(form_number) {
  145.     MultiSelect.select_form(form_number);
  146.     for (
  147.         count=0;
  148.         count < MultiSelect.number_of_boxes+1;
  149.         count++
  150.     ) {
  151.         if (MultiSelect.current_boxes[count].checked) {
  152.          MultiSelect.current_boxes[count].checked=false;
  153.         } else {
  154.          MultiSelect.current_boxes[count].checked=true;
  155.         }
  156.     }
  157. };
  158.  
  159. MultiSelect.zebra_select = function(form_number) {
  160.     MultiSelect.select_form(form_number);
  161. var zebra_select_next=false; // reset to "false"
  162.     for (
  163.         count=0;
  164.         count < MultiSelect.number_of_boxes+1;
  165.         count++
  166.     ) {
  167.         /* switch selection mode */
  168.         // check if box after current one exists to prevent exception from occuring
  169.         while (MultiSelect.current_boxes[count+1] && MultiSelect.current_boxes[count].checked && count < MultiSelect.number_of_boxes) {
  170.             zebra_select_next ? zebra_select_next=false : zebra_select_next=true;
  171.             count++; // skip over already selected boxes
  172.         }
  173.         MultiSelect.current_boxes[count].checked=zebra_select_next;
  174.     }
  175. };
  176. </script>
  177.  
  178. </body>
  179.  
  180. </html>
Tags: html js
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!