Установите флажок при нажатии на родительский div - PullRequest
Новая
       2

Установите флажок при нажатии на родительский div

1 голос
/ 21 сентября 2019

Я застрял в части jquery, где мне нужно переключать флажок ("# abc" & "#aac") всякий раз, когда я нажимаю на блок div jumbotron ("# ab & #aa").Ниже приведен код: 

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

Ответы [ 2 ]

2 голосов
/ 21 сентября 2019

Я пытался это исправить, и все работает нормально

В основном вам не хватало одного условия.взгляните на фрагмент кода, и вы поймете. 

$(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>
1 голос
/ 21 сентября 2019

Чтобы переключить состояние 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...