我在所需的类上有这个过滤器代码 我的问题是它没有检测到复选框:
这是在单击按钮时弹出的模型 Bootstrap HTML， 另外，是否可以防止模型在验证未通过时关闭它？当我点击按钮时，即使验证没有通过模型关闭，我必须再次打开它....
$("#save_2").click(function() {
var required = $('input,textarea,select,input:checkbox').filter('.required');
var allRequired = true;
required.each(function() {
if ($(this).val() == '') {
allRequired = false;
}
});
if (!allRequired) {
Swal.fire({
title: 'שגיאה!',
text: 'אנא מלא את כל השדות המסומנים באדום',
type: 'error',
confirmButtonText: 'סגור'
});
$(".required").css("border", "1px solid red", "!important")
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade bd-example-modal-lg secondtarget" id="modelcheck" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="padding: 18px">
<div class="modal-header">
<div class="col-lg-12" style="text-align: center">
<h5 class="modal-title" id="exampleModalLabel" style="text-align: center">טופס הצהרת ההורים על מצב בריאותו של ילדם להשתתפותו בתוכנית
</h5>
<a href="#" class="btn btn-info mt-5" id="h_std_name">
<?php if (!isset($row['std_name'])){echo '';}else{echo $row['std_name'];} ?>
</a>
</div>
</div>
<div class="row col-lg-12">
<p>אני מצהיר/ה כי (סמן את האפשרות הנכונה):</p>
<p>1. <input type="checkbox" class="required" name="limit_1" value="1"> לא ידוע לי על מגבלות בריאותיות המונעות מבני/מבתי להשתתף בפעילות הנערכת בבית הספר ומטעמו.</p>
<p>2 .יש לבני/לבתי מגבלות בריאותיות המונעות השתתפות מלאה/חלקית בפעילות בבית הספר ומטעמו כדלקמן:</p>
<fieldset id="checkArray">
<ul style=" list-style-type: none;">
<li style="margin-right: 16px;"> <input type="checkbox" class="limit2 section_2" value="פעילות גופנית" name="limit_2[]"> פעילות גופנית </li>
<li style="margin-right: 16px;"> <input type="checkbox" class="limit2 section_2" value="פעילות בחדר כושר" name="limit_2[]"> פעילות בחדר כושר </li>
<li style="margin-right: 16px;"> <input type="checkbox" class="limit2 section_2" value="טיולים" name="limit_2[]"> טיולים </li>
<li style="margin-right: 16px;"> <input type="checkbox" class="limit2 " value="תחרות ספורט של בתי הספר" name="limit_2[]"> תחרות ספורט של בתי הספר </li>
</ul>
</fieldset>
<input type="text" class="form-control mt-2 section_2" name="limit2_activity " placeholder="פעילות אחרת">
<input type="text" class="form-control mt-2 section_2" name="limit2_description " value="" placeholder="תיאור המגבלה">
<div class="row mt-2 ">
<div class="col-sm-4" style="width: ">
<p>מצורף אישור רפואי שניתן ע"י </p>
</div>
<div class="col-sm-4">
<input type="text" name="dr_name" class="form-control section_2">
</div>
<div class="col-sm">
<div class="custom-file">
<input type="file" class="form-control section_2" name="image">
</div>
</div>
<div class="col-sm-12">
<input type="text" class="form-control section_2" name="limit_time" placeholder="לתקופה">
</div>
</div>
<div class="row mt-2">
<div class="col-sm">
<p>3 .יש לבני/ לבתי בעיה בריאותית כרונית (כגון אסטמה, סוכרת נעורים, אפילפסיה, רגישות למזון,וכד').</p>
</div>
</div>
<div class="row" style="margin-top: -16px">
<div class="col-sm-12" style="width: 762px;" class="full-input">
<ul style=" list-style-type: none;">
<li style="margin-right: 16px;"> <input type="checkbox" value="1" class="limit3 required" name="limit_3"> כן </li>
<li style="margin-right: 16px;"> <input type="checkbox" value="2" class="limit3 required" name="limit_3"> לא </li>
<li style="margin-right: 16px;"> <input type="text" id="limit_3_req" class="form-control" name="limit_3_description" placeholder="פרט"> </li>
</ul>
</div>
</div>
<div class="row ">
<div class="col-sm">
<p>4 .בני/ בתי נוטל/ת תרופה/ות באופן קבוע</p>
</div>
</div>
<div class="row" style="margin-top: -16px">
<div class="col-sm-12" style="width: 762px;" class="full-input">
<ul style=" list-style-type: none;">
<li style="margin-right: 16px;"> <input type="checkbox" value="1" class="limit4 required" name="limit_4"> כן </li>
<li style="margin-right: 16px;"> <input type="checkbox" value="2" class="limit4 required" name="limit_4"> לא </li>
<li style="margin-right: 16px;"> <input type="text" class="form-control" id="limit_4_req" name="limit_4_description" placeholder="פרט"> </li>
</ul>
</div>
</div>
<div class="row ">
<div class="col-sm">
<p>5 .בני/ בתי סובל/ת מרגישות לתרופות או למזון</p>
</div>
</div>
<div class="row" style="margin-top: -16px">
<div class="col-sm-12" style="width: 762px;" class="full-input">
<ul style=" list-style-type: none;">
<li style="margin-right: 16px;"> <input type="checkbox" value="1" class="limit5 required" name="limit_5"> כן </li>
<li style="margin-right: 16px;"> <input type="checkbox" value="2" class="limit5 required" name="limit_5"> לא </li>
<li style="margin-right: 16px;"> <input type="text" class="form-control" id="limit_5_req" name="limit_5_description" placeholder="פרט"> </li>
</ul>
</div>
</div>
</div>
<div class="row ">
<div class="col-sm">
<p>6 .אנו מאשרים לבני/ בתי להתשתתף בפעילות מים</p>
</div>
</div>
<div class="row" style="margin-top: -16px">
<div class="col-sm-12" style="width: 762px;" class="full-input">
<ul style=" list-style-type: none;">
<li style="margin-right: 16px;"> <input type="checkbox" value="1" class="limit6 required" name="limit_6"> כן </li>
<li style="margin-right: 16px;"> <input type="checkbox" value="2" class="limit6 required" name="limit_6"> לא</li>
</ul>
</div>
</div>
<div class="row ">
<div class="col-sm">
<p>7. האם הילד / הילדה יודעים לשחות</p>
</div>
</div>
<div class="row" style="margin-top: -16px">
<div class="col-sm-12" style="width: 762px;" class="full-input">
<ul style=" list-style-type: none;">
<li style="margin-right: 16px;"> <input type="checkbox" value="1" class="limit7 required" name="limit_7"> כן </li>
<li style="margin-right: 16px;"> <input type="checkbox" value="2" class="limit7 required" name="limit_7"> לא </li>
</ul>
</div>
</div>
<div class="modal-footer">
<div class="container">
<div class="col mb-3">אישור ההורים</div>
<div class="row">
<div class="col-sm">
<label for="health_date">תאריך הגשת ההצהרה</label>
<input type="date" class="form-control required" value="" name="health_date">
</div>
<div class="col-sm">
<label for="health_date">שם ממלא הטופס</label>
<input type="text" placeholder="שם ההורה" value="" class="form-control required" name="parent_name">
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary" id="save_2" data-dismiss="modal" style="margin-top: 32px;">שמור</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>最佳答案
$(el).val() 返回 value 属性的内容，无论复选框是否被选中。
const out = document.getElementById('out');
[...document.querySelectorAll('input')].forEach((i) => {
console.log('value: ' + $(i).val());
});<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="cbx1" type="checkbox" value="1" checked />
<label for="cbx1">Checked</label>
<br>
<input id="cbx2" type="checkbox" value="2" />
<label for="cbx2">Unchecked</label>
<p id="out"></p>Endless 的评论是正确的:您应该更喜欢使用 HTML5 的验证 API。但是，您可以编写 jQuery 来处理复选框的特殊情况。
如果必须检查具有 required 类的复选框以使表单有效，您可以按照以下行做一些事情:
if ($(this).is('[type="checkbox"]')) {
allRequired = this.checked;
} else if ($(this).val() == '') {
allRequired = false;
}
您还想在第一个无效输入时退出循环。否则，您只是在有效地验证表单中的最后一个输入。
关于javascript - 以不响应复选框的形式过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57209773/