Skip to main content
Participating Frequently
July 17, 2017
Answered

Checkmark box, Radio button or Dropdown list

  • July 17, 2017
  • 2 replies
  • 593 views

I am still confused on which to use. Basically I want a user to be able to pick multiple selections with at least one selection REQUIRED. I  love the radio button but I read only one selection can be picked. But then I read that the checkmark allow multiple selections but it allows user not to select atleast one ( is this true?) - I am trying to avoid the Dropdown list but does it seem like my only choice? - Also can I accomplish this using individual radio buttons instead of the radio button group? I have over 25 selections. Thanks for your help.

    This topic has been closed for replies.
    Correct answer osgood_

    SisterMargaret  wrote

    But then I read that the checkmark allow multiple selections but it allows user not to select atleast one ( is this true?)

    No it's not true. You can use jQuery, javascript or php to check that at least one checkbox option has been chosen. Below is some sample code using jQuery:

    <!DOCTYPE html>

    <html>

    <head>

    <title>Checkbox Validation</title>

    <meta charset="UTF-8">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <script>

    // checkbox validation

    $(function(){

    $("#select").submit(function(){

    var checked = $(".selection:checked").length > 0;

    if (!checked){

    alert("Please choose at least one option");

    return false;

    }

    });

    });

    </script>

    </head>

    <body>

    <h2>Please select your options</h2>

    <form method='post' id="select" action=''>

    <p><input type="checkbox" name="selection[]" class="selection" title="selection" value="Red"/> Red</p>

    <p><input type="checkbox" name="selection[]" class="selection" title="selection" value="Yellow"/> Yellow</p>

    <p><input type="checkbox" name="selection[]" class="selection" title="selection" value="Green"/> Green</p>

    <p><input type="checkbox" name="selection[]" class="selection" title="selection" value="Blue"/> Blue</p>

    <p><input type="submit" name="submit" class="submit" value="SUBMIT"></p>

    </form>

    </body>

    </html>

    2 replies

    osgood_Correct answer
    Legend
    July 17, 2017

    SisterMargaret  wrote

    But then I read that the checkmark allow multiple selections but it allows user not to select atleast one ( is this true?)

    No it's not true. You can use jQuery, javascript or php to check that at least one checkbox option has been chosen. Below is some sample code using jQuery:

    <!DOCTYPE html>

    <html>

    <head>

    <title>Checkbox Validation</title>

    <meta charset="UTF-8">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <script>

    // checkbox validation

    $(function(){

    $("#select").submit(function(){

    var checked = $(".selection:checked").length > 0;

    if (!checked){

    alert("Please choose at least one option");

    return false;

    }

    });

    });

    </script>

    </head>

    <body>

    <h2>Please select your options</h2>

    <form method='post' id="select" action=''>

    <p><input type="checkbox" name="selection[]" class="selection" title="selection" value="Red"/> Red</p>

    <p><input type="checkbox" name="selection[]" class="selection" title="selection" value="Yellow"/> Yellow</p>

    <p><input type="checkbox" name="selection[]" class="selection" title="selection" value="Green"/> Green</p>

    <p><input type="checkbox" name="selection[]" class="selection" title="selection" value="Blue"/> Blue</p>

    <p><input type="submit" name="submit" class="submit" value="SUBMIT"></p>

    </form>

    </body>

    </html>

    Participating Frequently
    July 17, 2017

    Thank you. Your answer was very helpful.

    Legend
    July 17, 2017

    SisterMargaret  wrote

    Thank you. Your answer was very helpful.

    No problem. If you need any more help then post back - someone will be able to help you out I'm sure.

    Jon Fritz
    Community Expert
    Community Expert
    July 17, 2017

    Under the HTML5 doctype, you can do this in a <select>, using the "required" and "multiple" attributes...


    <select multiple required style="width:200px">

        <option disabled>Control-Click to Select Multiple</option>

        <option value="1">Option 1</option>

        <option value="2">Option 2</option>

        <option value="3">Option 3</option>

    </select>

    Participating Frequently
    July 17, 2017

    Thank you!