Toggle checkbox when click on parent div
Question
I'm stuck with the jquery part where I need to toggle checkbox("#abc" & "#aac") whenever I click on jumbotron div box("#ab & #aa"). Following is the code:
$(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 answers
solution1
2 2019-09-21 16:02:54
I tried to fix this and it's working fine
Basically you were missing one condition. have a look to code snippet and you will understand.
$(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>
solution2
1 ACCPTED 2019-09-21 15:38:41
To toggle the checked state you can provide a function to prop() which accepts the current state as an argument. You can then return the inverse of this boolean value to toggle it:
$(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>
That being said, you can make the logic more simple and extensible by using common classes on #ab and #aa then using DOM traversal to find the related checkbox:
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>
If you don't care about supporting IE then it can be made simpler still:
$(this).find(':checkbox').prop('checked', (i, checked) => !checked);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Toggle checkbox - click on parent DIV element
Div toggle on checkbox but detect click when outside of the div to toggle off
Toggle Checkbox with jQuery on parent click
How to toggle a child div when i click on a parent div
Click on a div to toggle a checkbox inside of it using javascript
jquery checkbox checked toggle when click of a button
click on a parent div to trigger checkbox submission?
ng-click child checkbox of Parent div
How to toggle the check state of a radio input element on click when all inputs share the same parent div?
toggle class on parent div on click (or ng-click)
Related Tags