如何检查多个选择器以触发事件？答案

【问题标题】：How to check multiple selectors to trigger an event?如何检查多个选择器以触发事件？
【发布时间】：2022-01-20 12:28:53
【问题描述】：

jquery 新手，但我正在开发响应式日历。现在我有一个开始日期和一个结束日期字段。如果填充了结束日期，则会显示重复复选框，因为它会将其从不可见的类中删除。

我如何也可以添加对开始日期的检查？我希望复选框在开始和结束字段都被填充时显示，而不仅仅是一个。

 $("#end_date").on("input", function (){
            if($('#end_date').length >= 1) {
                $("#reoccurrence").removeClass('not-visible');
            } else {
                $("#reoccurrence").addClass('not-visible');
            }
        });

.not-visible {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <div class="md-form md-form-container-fix">
    <input type="text" id="start_date" class="form-control date-picker" name="start_date" required />
    <label for="start_date">Start Date</label>
  </div>
</div>

<div class="col">
  <div class="md-form md-form-container-fix">
    <input type="text" id="end_date" class="form-control date-picker" name="end_date" required />
    <label for="end_date">End Date</label>
  </div> 
</div>

<div class="form-check not-visible" id="reoccurrence" name="reoccurrence">
  <input class="form-check-input" type="checkbox" id="is_reoccurring" name="is_reoccurring" value="1" />
  <label class="form-check-label" for="is_reoccurring"> Reoccurrence? </label>
</div>

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

在这种情况下，使用length 将告诉您该输入是否存在于 DOM 中（0 = 不存在，1 = 存在），但它不会评估输入的值。

长度
jQuery 对象中的元素数。
当前匹配的元素数。

相反，我建议使用val() 来验证两个输入的值都不是空字符串。

在下面的演示中，我将每个输入和“重复出现”元素定义为变量。我使用add() 组合两个输入并将事件处理程序绑定到两者。或者，您可以简单地选择两个输入：$("#start_date,#end_date");见multiple selector。

在输入时，我根据两个输入的值定义了一个布尔“oneEmpty”变量。然后，我使用toggleClass() 来“添加或删除一个或多个类......取决于...... state 参数的值。”

当任一输入为空时，“oneEmpty”状态为true，并且“不可见”类被打开。当两个输入都填满时，状态为false，并且类被关闭。

var $start_date = $('#start_date');
var $end_date = $('#end_date');
var $reoccurrence = $("#reoccurrence");

$start_date.add($end_date).on("input", function() {
  let oneEmpty = $start_date.val() == '' || $end_date.val() == '';
  $reoccurrence.toggleClass('not-visible', oneEmpty);
});

.not-visible {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <div class="md-form md-form-container-fix">
    <input type="text" id="start_date" class="form-control date-picker" name="start_date" required />
    <label for="start_date">Start Date</label>
  </div>
</div>

<div class="col">
  <div class="md-form md-form-container-fix">
    <input type="text" id="end_date" class="form-control date-picker" name="end_date" required />
    <label for="end_date">End Date</label>
  </div>
</div>

<div class="form-check not-visible" id="reoccurrence" name="reoccurrence">
  <input class="form-check-input" type="checkbox" id="is_reoccurring" name="is_reoccurring" value="1" />
  <label class="form-check-label" for="is_reoccurring"> Reoccurrence? </label>
</div>

【讨论】：

这很完美！谢谢！