Copy link to clipboard
Copied
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.
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-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt
...Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
Thank you!
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
Thank you. Your answer was very helpful.
Copy link to clipboard
Copied
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.