javascript - 单击父 div 时切换复选框

Question

每当我点击 jumbotron div 框(“#ab & #aa”)时，我都需要切换复选框(“#abc”和“#aac”)的 jquery 部分。以下是代码:

$(document).ready(function(){

  $("#ab").on('click', function(){
    $("#abc").prop('checked', true);
  });
  $("#aa").click(function(){
    $("#aac").prop('checked', true);
  });

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid mt-4">
  <h3 class="mb1">
    <i class="fa fa-check-square"></i> Select the extras you'd like us to arrange...
  </h3>
  <div class="row jumbotron style-04 m-2 py-2 mt-4" id="ab" style="cursor:pointer;">
    <div class="col-11 pt-3">
      <p class="fs-18"><i class="fa fa-building fa-fw"></i>Accommodation before your trip</p>
    </div>
    <div class="col-1 pt-3 text-right">
      <input type="checkbox" class="accommodationOption" name="abc" id="abc">
    </div>
  </div>
  <div class="row jumbotron style-04 m-2 py-2 mt-4" id="aa" style="cursor:pointer;">
    <div class="col-11 pt-3">
      <p class="fs-18"><i class="fa fa-building fa-fw"></i> Accommodation after your trip</p>
    </div>
    <div class="col-1 pt-3 text-right">
      <input type="checkbox" class="accommodationOption" name="aac" id="aac">
    </div>
  </div>
</div>

Answer 1

要切换checked 状态，您可以向prop() 提供一个函数，它接受当前状态作为参数。然后您可以返回这个 bool 值的倒数来切换它:

$(document).ready(function() {
  $("#ab").on('click', function() {
    $("#abc").prop('checked', function(i, checked) {
      return !checked;
    });
  });

  $("#aa").click(function() {
    $("#aac").prop('checked', function(i, checked) {
      return !checked;
    });
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid mt-4">
  <h3 class="mb1">
    <i class="fa fa-check-square"></i> Select the extras you'd like us to arrange...
  </h3>
  <div class="row jumbotron style-04 m-2 py-2 mt-4" id="ab" style="cursor:pointer;">
    <div class="col-11 pt-3">
      <p class="fs-18"><i class="fa fa-building fa-fw"></i>Accommodation before your trip</p>
    </div>
    <div class="col-1 pt-3 text-right">
      <input type="checkbox" class="accommodationOption" name="abc" id="abc">
    </div>
  </div>
  <div class="row jumbotron style-04 m-2 py-2 mt-4" id="aa" style="cursor:pointer;">
    <div class="col-11 pt-3">
      <p class="fs-18"><i class="fa fa-building fa-fw"></i> Accommodation after your trip</p>
    </div>
    <div class="col-1 pt-3 text-right">
      <input type="checkbox" class="accommodationOption" name="aac" id="aac">
    </div>
  </div>
</div>

也就是说，您可以通过在 #ab 和 #aa 上使用通用类然后使用 DOM 遍历来查找相关的复选框，从而使逻辑更加简单和可扩展:

jQuery(function($) {
  $(".check-toggle").on('click', function() {
    $(this).find(':checkbox').prop('checked', function(i, checked) {
      return !checked;
    });
  });
});

.check-toggle {
  cursor: pointer;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid mt-4">
  <h3 class="mb1">
    <i class="fa fa-check-square"></i> Select the extras you'd like us to arrange...
  </h3>
  <div class="row jumbotron style-04 m-2 py-2 mt-4 check-toggle">
    <div class="col-11 pt-3">
      <p class="fs-18"><i class="fa fa-building fa-fw"></i>Accommodation before your trip</p>
    </div>
    <div class="col-1 pt-3 text-right">
      <input type="checkbox" class="accommodationOption" name="abc" />
    </div>
  </div>
  <div class="row jumbotron style-04 m-2 py-2 mt-4 check-toggle">
    <div class="col-11 pt-3">
      <p class="fs-18"><i class="fa fa-building fa-fw"></i> Accommodation after your trip</p>
    </div>
    <div class="col-1 pt-3 text-right">
      <input type="checkbox" class="accommodationOption" name="aac" />
    </div>
  </div>
</div>

如果您不关心支持 IE，那么它还可以做得更简单:

$(this).find(':checkbox').prop('checked', (i, checked) => !checked);