单击父div时切换复选框

Question

我被jquery部分卡住了，每当我点击jumbotron div框(“#ab& #aa")时，我需要切换复选框(”#abc“& "#aac")。代码如下：

​

$(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()提供一个函数，该函数接受当前状态作为参数。然后，可以对该布尔值的倒数执行return操作，以切换该值：

​

$(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);

Answer 2

我试着解决这个问题，它工作得很好

基本上你遗漏了一个条件。看一下代码片段，你就会明白了。

​

$(document).ready(function(){

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

});

<!DOCTYPE html>
<html>

<body>
<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>
</body>
<script>
</script>
</html>

​