單擊父 div 時切換復選框
[英]Toggle checkbox when click on parent div
問題描述
我被 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>
2 個解決方案
解決方案1
2 2019-09-21 16:02:54
我試圖解決這個問題，它工作正常
基本上你錯過了一個條件。 看看代碼片段，你就會明白。
$(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
要切換checked的 state，您可以將 function 提供給prop() ，它接受當前的 state 作為參數。 然后，您可以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>
話雖如此，您可以通過在#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啟用復選框，但在div之外時檢測到單擊以關閉
[英]Div toggle on checkbox but detect click when outside of the div to toggle off
當所有輸入共享相同的父div時，如何在單擊時切換單選輸入元素的檢查狀態？
[英]How to toggle the check state of a radio input element on click when all inputs share the same parent div?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.