CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Multiple checkboxes vs MultiSelect  (Read 748 times)

AndrewTraub

  • Jr. Member
  • **
  • Posts: 80
  • Karma: +0/-0
Multiple checkboxes vs MultiSelect
« on: 2 Jun 2021, 05:06:16 pm »
In my experience, a lot of users don't know how to properly use the multi-select input.  As an alternative, I'm considering creating three columns of checkboxes, but there would be 52 checkboxes.  What are your thoughts on which to use?

jmrker

  • Junior Member
  • *
  • Posts: 43
  • Karma: +1/-0
Re: Multiple checkboxes vs MultiSelect
« Reply #1 on: 3 Jun 2021, 12:12:16 am »
Here is a non-sense display of the options you are debating.  Easy to modify.

1. Uses HTML 'title' attribute to show user options

2. Uses 1st option to display user actions available

3. Uses 'focus' of select element to show/hide user actions allowed.

4. Uses JS to show/hide checkbox displays.  Only limited (not 52) check boxes.
Probably could be modified to use CSS and label to display DIV of check boxes instead of JS button event

Choice is up to you as designer.  Add logic to act upon user choices.

Code: [Select]
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Multiple Selection Displays Test Page </title>
<!-- From: https://forums.cutcodedown.com/index.php?topic=512.msg2744;topicseen#new -->
<style>
 fieldset { width: 12em; display: inline; }

 #interestInfo { display: none; }          /* visibility: hidden; } */
 #interest:focus + div { display: block; } /* visibility: visible; } */

 #gradeInfo { display: none; }
</style>

</head><body>
<fieldset><legend>Pets (hover)</legend>
 <select name="pets" id="pet-select" multiple title="Single/Shift:range/Ctrl:picks">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
 </select>
</fieldset>

<fieldset><legend>Rate Level (option)</legend>
 <select id="rates" multiple size="5">
  <option value=""> Select-Single/Shift:range/Ctrl:picks </option>
  <option value="1"> 1 </option>
  <option value="2"> 2 </option>
  <option value="3"> 3 </option>
  <option value="4"> 4 </option>
  <option value="5"> 5 </option>
  <option value="6"> 6 </option>
  <option value="7"> 7 </option>
  <option value="8"> 8 </option>
  <option value="9"> 9 </option>
 </select>
</fieldset>

<fieldset><legend>Interest Level (focus)</legend>
 <select id="interest" multiple size="7">
  <option value=""> Select </option>
  <option value="1"> 10 </option>
  <option value="2"> 20 </option>
  <option value="3"> 30 </option>
  <option value="4"> 40 </option>
  <option value="5"> 50 </option>
  <option value="6"> 60 </option>
  <option value="7"> 70 </option>
  <option value="8"> 80 </option>
  <option value="9"> 90 </option>
 </select>
 <div id="interestInfo">Single:click<br>Shift:range<br>Ctrl:picks</div>
</fieldset>

<fieldset><legend>Grade Level (display)</legend>
 <input type='button' checked='false' id="grade" value='Proof'>
 <div id="gradeInfo">
  <input type="checkbox" value="100"> 100
  <input type="checkbox" value="200"> 200
  <input type="checkbox" value="300"> 300<br>
  <input type="checkbox" value="400"> 400
  <input type="checkbox" value="500"> 500
  <input type="checkbox" value="600"> 600<br>
  <input type="checkbox" value="700"> 700
  <input type="checkbox" value="800"> 800
  <input type="checkbox" value="900"> 900
 </div>
</fieldset>

<script>
 document.getElementById('grade').addEventListener(
   'click',
   (evt) => { let status = evt.target.checked; let info = evt.target.id+'Info';  // alert(info+'\n'+status);
              if (status == false) { evt.target.checked = true;  document.getElementById(info).style.display='none' }
                             else  { evt.target.checked = false; document.getElementById(info).style.display='block'; }
            }
 )
</script>

</body></html>


Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Multiple checkboxes vs MultiSelect
« Reply #2 on: 6 Jun 2021, 03:45:23 am »
Generally if you have 52 options, you've got too many options and/or poor data planning. What's the data and why so many choices?

@jmrker, that's some jacked up nonsensical markup. FIELDSET are for SETS of fields. You don't use fieldset and LEGEND for ONE field, that's LABEL's job. Most of the time if the value is the same as the content of the option, you don't need value="", and generally if you need scripting for click events there's something wrong with your form... and on that last set where are your LABEL? (only that last group qualifies as a fieldset)
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

John_Betong

  • Full Member
  • ***
  • Posts: 218
  • Karma: +24/-1
    • The Fastest Joke Site On The Web
Re: Multiple checkboxes vs MultiSelectknight,
« Reply #3 on: 6 Jun 2021, 03:59:31 am »
@Jason Knight
If you think 52 options is too many then you won't like this page, which I thought was very innovative :)


https://www.johns-jokes.com/all-the-jokes
« Last Edit: 6 Jun 2021, 09:41:49 am by John_Betong »
Retired in the City of Angels where the weather suits my clothes

jmrker

  • Junior Member
  • *
  • Posts: 43
  • Karma: +1/-0
Re: Multiple checkboxes vs MultiSelect
« Reply #4 on: 6 Jun 2021, 01:36:39 pm »
...

@jmrker, that's some jacked up nonsensical markup. FIELDSET are for SETS of fields. You don't use fieldset and LEGEND for ONE field, that's LABEL's job. Most of the time if the value is the same as the content of the option, you don't need value="", and generally if you need scripting for click events there's something wrong with your form... and on that last set where are your LABEL? (only that last group qualifies as a fieldset)

Sorry if I offended you.  I only use FIELDSET to separate the 4 different examples with the legend as the descriptor for the contents of the individual element.  Example was for the author's question, not as a lesson in fieldset usage.  Fieldset usage here was just to delineate select options available.

 

SMF spam blocked by CleanTalk

Advertisement