如何使用Javascript / JQuery验证复选框中是否至少选中了两个字段？

问题描述 投票：0回答：4

我正在尝试为表单创建Javascript验证代码，以便在单击“提交”后验证表单的每个部分。我在编写代码时遇到麻烦，因此表单的复选框部分验证是否已选择两个或多个复选框。我试图通过编写代码从简单开始，以便在根本没有选中任何复选框的情况下，div（错误复选框）将显示一条消息。但是，它不起作用。这是与复选框相关的HTML和脚本代码：

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>

和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");
      }
    }

现在，该代码不执行任何操作。错误复选框div不会出现，并且如果选中复选框，则控制台日志中也不会更改。因此，这是我遇到的一个问题。我仍然需要验证是否选中了两个或多个复选框。我希望通过在checkContactee函数中添加if else语句来做到这一点，但不确定如何。

javascript jquery html
4个回答
0
投票

您可以使用选择器获取所选项的:checked。

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>
0
投票

使用一个类作为您的复选框，然后选择它，或者使用标签名称和类型来选择标签，您正在使用标签标签的ID来检查复选框，请在jquery中使用.is（）方法进行检查]

$("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");
      }
    }
0
投票

var checkedCount=$("input[name^='type']:checked).length-这将拉出所有输入，查找名称以“ type”开头的输入，保留被检查的输入，并返回检查的数量（此处已分配给checkedCount变量）。我将把用户的进一步验证/评分留给您]

0
投票

查看您的代码，我会推荐一些事情。您的复选框看起来像您要捕获联系人类型的多个值，因此它们应具有相同的名称属性。每个复选框都应具有其自己的标签，并且在现在有标签的位置，您应该使用fieldset和legend。

通过将复选框包装在字段集中，我们可以将其用作验证过程的一部分。

$("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>

这样，它是可扩展的，而不依赖于ID。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.