How to use Javascript/JQuery to verify that at least two fields in a checkbox are selected?

multiple checkboxes at least 1 required
at least one checkbox checked jquery
checkbox validation in jquery on submit
at least one checkbox checked validation in html5
jquery check if checkbox is checked
select at least two checkbox validation in javascript
multiple checkbox validation in jquery
how to check checkbox is checked or not in jquery on button click

I am trying to create Javascript verification code for a form, so that each section of the form is verified after hitting "submit". I am having trouble writing the code so that the checkbox section of the form verifies that two or more boxes have been selected. I tried to start simple by writing the code so that a div, errorcheckbox, would display a message if no checkbox is selected at all. However it does not work. Here is the HTML and script for the code pertaining to the checkbox:

HTML:

  <form action="#" method="POST">
    <div class="contactForm">
      <label for="checkbox" id="checkbox" name="checkbox">Contactee Type: </label><br>
      <div id="errorcheckbox" class="error"></div>
      <input type="checkbox" name="type1" value="Individual">Individual<br>
      <input type="checkbox" name="type2" value="Catering">Business:Catering<br>
      <input type="checkbox" name="type3" value="Partner">Business:Partner<br>
    </div>

    <div class="button"><input type="button" name="submit" id="submit" value="Submit"></div>

  </form>

and the Javascript:

    $("document").ready(function(){
      console.log("Loaded");
      $("#submit").click(function(){
        checkContactee();
      });

    $("#checkbox").change(function(){
      console.log("Something in contactee changed");
      checkContactee();
    });

    function checkContactee(){
      if (document.getElementById("checkbox").checked == false){
        $("#errorcheckbox").html("<p>You missed this field</p>");
        $("#errorcheckbox").addClass("showerror");
      }
      else{
        $("#errorregarding").html("");
        $("#errorregarding").removeClass("showerror");
      }
    }

Right now, the code does nothing. The errorcheckbox div doesn't appear, and there is no change in the console log if a checkbox item is selected. So, this is one problem I'm having. I still need to verify that two or more of the boxes are checked. I'm hoping to do this by adding an if else statement to the checkContactee function, but am not sure how.


Looking at your code I would recommend a couple of things. Your check boxes look like you want to capture multiple values for a contact type, so they should have the same name attribute. Each check box should have it's own label and where you have a label now you should use a fieldset and legend.

By wrapping the checkboxes in a fieldset we can then use that as part of the validation process.

$("document").ready(function() {
  console.log("Loaded");
  $("fieldset[data-mincheckboxchecked] [type=checkbox]").on("click", function() {
    console.log("Click")
    //Get the parent fieldset
    let $parent = $(this).closest("fieldset[data-mincheckboxchecked]");
    validateMultiCheckBox($parent);

  });
});

function validateMultiCheckBox($parent) {
  console.log($parent)
  //Get minimum checked from the data attribute
  let minCheked = $parent.data("mincheckboxchecked");
  minChecked = parseInt(minCheked, 10);

  //Get the number of checked checkboxes in the parent
  let numCheked = $parent.find("[type=checkbox]:checked").length;

  //Validation Logic
  if (numCheked < minCheked) {
    $parent.find(".error").html("<p>Please select at least " + minChecked + " option" + (minCheked !== 1 ? "s" : "") + "</p>");
    $parent.find(".error").addClass("showerror");
    return false;
  } else {
    $parent.find(".error").html("");
    $parent.find(".error").removeClass("showerror");
    return true;
  }
}

$("#submit").click(function() {
  var isValid = false;
  var multiCheckValid = true;

  //Validate each group of multi checkboxes
  $("fieldset[data-mincheckboxchecked]").each(function() {
    console.log(this);
    if (!validateMultiCheckBox($(this))) {
      multiCheckValid = false;
    }
  })

  //Normally you'e set this to return false, leaving like 
  //this for demo purposes
  console.log(multiCheckValid);
  return isValid;
});
.error {
  display: none;
  color: red;
}

.error.showerror {
  display: block;
}

fieldset label {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST">
  <div class="contactForm">
    <fieldset data-mincheckboxchecked="2">
      <legend>Contactee Type: </legend>

      <div id="errorcheckbox" class="error"></div>
      <label><input type="checkbox" name="contactType" value="Individual">Individual</label>
      <label><input type="checkbox" name="contactType" value="Catering">Business:Catering</label>
      <label><input type="checkbox" name="contactType" value="Partner">Business:Partner</label>
    </fieldset>

    <fieldset data-mincheckboxchecked="1">
      <legend>One Required: </legend>

      <div id="errorcheckbox" class="error"></div>
      <label><input type="checkbox" name="oneReq" value="1">A Thing</label>
      <label><input type="checkbox" name="oneReq" value="2">Another Thing</label>
      <label><input type="checkbox" name="oneReq" value="3">Yet another thing</label>
    </fieldset>

    <fieldset data-mincheckboxchecked="3">
      <legend>Top 3 Movies: Three required</legend>

      <div id="errorcheckbox" class="error"></div>
      <label><input type="checkbox" name="movie" value="Top Gun">Top Gun</label>
      <label><input type="checkbox" name="movie" value="Terminator">Terminator</label>
      <label><input type="checkbox" name="movie" value="Sound Of Music">Sound OF Music</label>
      <label><input type="checkbox" name="movie" value="Mission Impossible">Mission Impossible</label>
    </fieldset>

  </div>

  <div class="button"><input type="button" name="submit" id="submit" value="Submit"></div>

</form>

Check that at least 1 checkbox is checked using jQuery , select:checked”). length > 0. So, jQuery is going to look for input-fields with the class “select” which are checked. None of your checkboxes have a class-attribute “select”, so you should add that to your checkboxes. My jQuery is fairly straightforward, you have to have both check boxes checked to continu Stack Exchange Network Stack Exchange network consists of 177 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.


You can use the :checked which the selector to get the checked items.

function validate() {
  console.log('Total Checked = ' + $('.contactForm input[type="checkbox"]:checked').length);
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="contactForm">
  <label for="checkbox" id="checkbox" name="checkbox">Contactee Type: </label><br>
  <div id="errorcheckbox" class="error"></div>
  <input type="checkbox" name="type1" value="Individual">Individual<br>
  <input type="checkbox" name="type2" value="Catering">Business:Catering<br>
  <input type="checkbox" name="type3" value="Partner">Business:Partner<br>
  <button onclick="validate()">Validate</button>
</div>

check that at least 1 checkbox is checked using , I'm trying to ensure that at least one checkbox is selected. I'm using the query validate plugin. here is the checkbox html. Here is my js subject: {; minlength: 2,; required: true; },; message: {; minlength: 2,; required: true; }, need to provide the correct name for the field, quoted because of the brackets:. Questions: I’m trying to validate a form using the validate plugin for jquery. I want to require that the user check at least one checkbox in a group in order for the form to be submitted.


use a class for your checkboxes and select that or use tag name and type to select tags, you are using the id of a label tag for checking checkboxes , use .is() method in jquery to check is checked

$("document").ready(function(){
      console.log("Loaded");
      $("#submit").click(function(){
        checkContactee();
      });

    $("input[type='checkbox']").change(function(){
      console.log("Something in contactee changed");
      checkContactee();
    });

    function checkContactee(){
      if ($("input[type='checkbox']").is(':checked'){
        $("#errorcheckbox").html("<p>You missed this field</p>");
        $("#errorcheckbox").addClass("showerror");
      }
      else{
        $("#errorregarding").html("");
        $("#errorregarding").removeClass("showerror");
      }
    }

At least one checkbox must be selected (checked), There is a form with multiple checkboxes and we're going to make sure that at least one is checked using pure JavaScript. To set a custom  I know how to see if an individual checkbox is selected or not. But Im having trouble with the following - given a form id I need to see if any of the checkboxes are selected (i.e 1 or more), and I need to see if none are selected. Basically I need two separate functions that answer these two questions. Help would be appreciated. Thanks!


var checkedCount=$("input[name^='type']:checked).length - this pulls all inputs, looks for those with the name beginning with "type", keep the ones that are checked, and returns how many are check (here, assigned to the checkedCount variable). I'll leave further validation/scolding of the user up to you

Check if any checkboxes are selected in jQuery, A jQuery function that will check all checkboxes in a specific form on form submit and To use the JavaScript function, just pass the ID of the form that has the can be useful if you have multiple forms with checkboxes on the same page. If all checkboxes have been left blank, a 'Please select at least one  Using the Click event handler for the checkbox property is unreliable, as the checked property can change during the execution of the event handler itself!. Ideally, you'd want to put your code into a change event handler such as it is fired every time the value of the check box is changed (independent of how it's done so).


How to Check/Uncheck the checkbox using JavaScript , Recommended Posts: How to use Checkbox inside Select Option using JavaScript ? How to style a checkbox using CSS? How to check a checkbox with jQuery  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE


Show Hide DIV Based on Click of Checkboxes in jQuery, The div boxes in the example are hidden by default using the CSS display property which value <title>jQuery Show Hide Elements Using Checkboxes</​title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <div class="red box">You have selected <strong>red checkbox</strong> so i am here​</div> The Javascript check all function has been tested for compatibility in IE8, IE9, Chrome & FireFox. JQuery Check & Uncheck checkboxes. If you prefer a jQuery check/uncheck function, the below code will achieve exactly the same as above. This code will target all checkboxes on a page using the $(“input:checkbox”) selector.


Forms in HTML documents, Step one: Identify the successful controls; Step two: Build a form data set The SELECT element creates a menu, in combination with the OPTGROUP and and checkboxes -- checked (checked) #IMPLIED -- for radio buttons and check to each type of field -- maxlength NUMBER #IMPLIED -- max chars for text fields  The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices. Tip: Always add the <label> tag for best accessibility practices!