Checkbox checked validation using JavaScript
You can check whether a checkbox is checked or not using checkbox_elemnt.checked attribute. Here is an example: See the Pen single checkbox validation by Prasanth (@prasanthmj) on CodePen. Here is the JavaScript code for easy reference: function validateForm(form) { console.log("checkbox checked is ", form.agree.checked); if(!form.agree.checked) { document.getElementById('agree_chk_error').style.visibility='visible'; return false; } else { document.getElementById('agree_chk_error').style.visibility='hidden'; return true; } }
Checkbox validation using jQuery
Suppose you have a check box with ID agree_checkbox. You can check whether the checkbox is checked using this jQuery code: $('#agree_checkbox').prop('checked') Here is a complete example: See the Pen Checkbox validation using jQuery by Prasanth (@prasanthmj) on CodePen. Here is the code that does the check: $("#myform").on("submit",function(form) { if(!$("#agree_checkbox").prop("checked")) { $("#agree_chk_error").show(); } else { $("#agree_chk_error").hide(); } return false; })
Custom styled checkboxes with Bootstrap
Sometimes, you may want to add a little more customization to your checkboxes than available in the default bootstrap style. Here is a collection of custom checkbox styles for your bootstrap projects: See the Pen awesome-bootstrap-checkbox/demo/ by Edrees (@Edrees21) on CodePen. code by @Edrees21
How to create a dropdown with checkbox options with Bootstrap Style
Suppose you want to allow your users to select multiple options. However, you want to display the options just like a dropdown. The HTML built-in dropdown box has a multiple option; but most users are unaware of how to select multiple options from such a list. Here is a jQuery component to your rescue: Bootstrap MultiSelect. The sample code to set up a dropdown box: <select name="ingredients[]" id="ingredients" multiple="multiple"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> $(document).
How to create checkbox in Bootstrap style ?
Here is the code to create a simple checkbox with bootstrap style: <div class="form-check"> <input class="form-check-input" type="checkbox" value="yes" id="newsletter_signup"> <label class="form-check-label" for="newsletter_signup"> Signup for newsletter </label> </div> Here is the working demo of a checkbox using Bootstrap style: See the Pen checkbox using Bootstrap by Prasanth (@prasanthmj) on CodePen. ‘Inline’ checkboxes Suppose you want multiple checkboxes in a single line. Just add form-check-inline class. Here is the sample code: <form > <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="chk_red" > <label class="form-check-label" for="chk_red">Red</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="chk_green" > <label class="form-check-label" for="chk_green">Green</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="chk_blue" > <label class="form-check-label" for="chk_blue">Blue</label> </div> </form> See the Pen Inline checkbox using bootstrap by Prasanth (@prasanthmj) on CodePen.
How to do multiple checkbox validation in Javascript
Checkboxes can be used as a single checkbox (like an on-ff switch) or as a group of checkboxes where the user can select one or more options. How do we do validations when you have multiple checkboxes? Here are some samples. At least one checkbox should be checked (Required validation) See the Pen Multiple checkbox validation by Prasanth (@prasanthmj) on CodePen. In the validation code, we extract the FormData object from the form element.
How to get checkbox value in form submission
Suppose you have a checkbox in your HTML form like this: <form> Email Address: <input type="email" name="email"> <input type="checkbox" name="opt_in_newsletter" > Subscribe to the newsletter </input> If the user checks the option, you will get the following form data email=name@domain.com opt_in_newsletter=on However, if the user does not check the option, then the opt_in_newsletter field itself will not be present in the form data that you receive on the server-side. email=name@domain.com You might have expected opt_in_newsletter=off But in reality, the behavior is different the W3c recommendation supports this behavior by the way.
HTML Form Checkbox with required validation
The code below shows how to create a single checkbox with “required” validation. Make sure you have not selected the checkbox and then press the submit button to see the error message. See the Pen Checkbox required validation by Prasanth (@prasanthmj) on CodePen. Required Validation for a group of checkboxes Although the HTML5 ‘required’ validation will work fine with Single checkboxes, there is no HTML5 validation for a group of checkboxes.
HTML Form with Checkboxes examples and sample code
Checkboxes can be used in different cases: You can use a single checkbox to make the user turn on or off an option (just like a switch). For example: Do you want to opt-in for our newsletter? You can provide a number of checkboxes where the user can choose more than one options Choose your favourite colors: Red Green Blue Checkbox form element is created by specifying type=checkbox attribute in <input> tag.