单击父 div 时切换复选框
[英]Toggle checkbox when click on parent div
问题描述
I'm stuck with the jquery part where I need to toggle checkbox("#abc" & "#aac") whenever I click on jumbotron div box("#ab & #aa").
我被 jquery 部分困住，每当我点击 jumbotron div 框（“#ab 和 #aa”）时，我都需要切换复选框（“#abc”和“#aac”）。 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 个解决方案
解决方案1
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>
解决方案2
1 已采纳 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.要切换checked的 state，您可以将 function 提供给prop() ，它接受当前的 state 作为参数。 You can then return the inverse of this boolean value to toggle it:然后，您可以return此 boolean 值的倒数来切换它：
$(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:话虽如此，您可以通过在#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>
If you don't care about supporting IE then it can be made simpler still:如果您不关心支持 IE，那么它可以变得更简单：
$(this).find(':checkbox').prop('checked', (i, checked) => !checked);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
切换复选框-单击父DIV元素 - Toggle checkbox - click on parent DIV element
div启用复选框，但在div之外时检测到单击以关闭 - Div toggle on checkbox but detect click when outside of the div to toggle off
在父单击时使用jQuery切换Checkbox - Toggle Checkbox with jQuery on parent click
当我单击父 div 时如何切换子 div - How to toggle a child div when i click on a parent div
单击div以使用javascript切换其中的复选框 - Click on a div to toggle a checkbox inside of it using javascript
单击按钮时，jquery 复选框已选中切换 - jquery checkbox checked toggle when click of a button
单击父div触发复选框提交？ - click on a parent div to trigger checkbox submission?
ng-click Parent div的子复选框 - ng-click child checkbox of Parent div
当所有输入共享相同的父div时，如何在单击时切换单选输入元素的检查状态？ - How to toggle the check state of a radio input element on click when all inputs share the same parent div?
单击（或ng单击）父div上的切换类 - toggle class on parent div on click (or ng-click)
相关标签