Question

当我单击jumbotron div框（“ #ab＆#aa”）时，我陷入了需要在jquery部分进行切换的复选框（“ #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

我试图解决此问题，并且效果很好

基本上，您缺少一种情况。看一下代码片段，您会明白的。

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

Answer 2

要切换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);

单击父div时切换复选框

2 个答案: