使用 Jquery 觸發對上一個兄弟的點擊

Question

當單擊復選框旁邊的文本（片段中的“財務部門”或“銷售部門”）時，我想觸發對復選框的單擊。

我已經嘗試過 jquery 和 javascript 但這兩個似乎都有效：

$(prevsibling).children().click();
$(prevsibling).children().trigger("click");

請找到附有代碼的片段。

有什么線索嗎？

非常感謝

 $(document).mouseup(function(e) { clickeditem = $(e.target); if (clickeditem.hasClass('checkboxinfotd')) { prevsibling = $(clickeditem).prev()[0]; $(prevsibling).children().click(); } else if (clickeditem.hasClass('checkboxtd') || clickeditem.hasClass('checkbutton')) { if (clickeditem.hasClass('checkboxtd')) { clickeditem = clickeditem.children()[0]; } else if (clickeditem.hasClass('checkbutton')) { } else { } console.log("clicked on checkbox"); thirdclass = clickeditem.attr('class').split(' ')[2]; if (thirdclass === "fa-square-o") { newclass = 'fa-check-square-o'; clickeditem.removeClass("fa-square-o"); clickeditem.addClass(newclass); } else if (thirdclass === "fa-check-square-o") { newclass = 'fa-square-o'; clickeditem.removeClass("fa-check-square-o"); clickeditem.addClass(newclass) } }; });

 .checkboxinfotd { cursor: pointer; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <Table id="belowtable"> <tbody class="scenariotbody"> <TR> <TD colspan="2"> Text </TD> </TR> <TR> <TD class="checkboxtd"><i class="checkbutton fa fa-square-o" aria-hidden="true" id="plan-282"></i> </TD> <TD class="checkboxinfotd">Finance department</TD> </TR> <TR> <TD class="checkboxtd"><i class="checkbutton fa fa-square-o" aria-hidden="true" id="plan-289"></i> </TD> <TD class="checkboxinfotd">Sales department</TD> </TR> </tbody> </Table>

Answer 1

你可以通過使用來實現你想要的： clickeditem.closest('tr').find('.checkbutton').trigger('mouseup');

此代碼查找表行父級。 在父級內部，它使用檢查按鈕checkbutton查找元素並觸發 mouseup 事件（您的代碼綁定到mouseup而不是click ）

---

正如其他人已經說過的那樣，明智的做法是放棄對復選框使用可怕的字體並使用 html input和label元素並使用 css 元素來設置樣式。 這將使您的生活更輕松地處理您的輸入。

 $(document).mouseup(function(e) { clickeditem = $(e.target); if (clickeditem.hasClass('checkboxinfotd')) { clickeditem.closest('tr').find('.checkbutton').trigger('mouseup'); } else if (clickeditem.hasClass('checkboxtd') || clickeditem.hasClass('checkbutton')) { if (clickeditem.hasClass('checkboxtd')) { clickeditem = clickeditem.children()[0]; } else if (clickeditem.hasClass('checkbutton')) { } else { } console.log("clicked on checkbox"); thirdclass = clickeditem.attr('class').split(' ')[2]; if (thirdclass === "fa-square-o") { newclass = 'fa-check-square-o'; clickeditem.removeClass("fa-square-o"); clickeditem.addClass(newclass); } else if (thirdclass === "fa-check-square-o") { newclass = 'fa-square-o'; clickeditem.removeClass("fa-check-square-o"); clickeditem.addClass(newclass) } }; });

 .checkboxinfotd { cursor: pointer; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <Table id="belowtable"> <tbody class="scenariotbody"> <TR> <TD colspan="2"> Text </TD> </TR> <TR> <TD class="checkboxtd"><i class="checkbutton fa fa-square-o" aria-hidden="true" id="plan-282"></i> </TD> <TD class="checkboxinfotd">Finance department</TD> <TD class="checkboxinfotd">Sales department</TD> </TR> </tbody> </Table>

Answer 2

你的問題並不完全清楚。 您會通過單擊右側的文本來觸發復選框嗎？ 如果是，請使用 label。

 /* Control the label position from here */.control { font-family: inherit; display: block; position: relative; padding-left: 30px; margin-bottom: 5px; padding-top: 5px; cursor: pointer; font-size: inherit; }.control input { position: absolute; z-index: -1; opacity: 0; }.control_indicator { position: absolute; top: 3px; left: 0; height: 20px; width: 20px; background: #008736; border: 0px solid #000000; border-radius: 0px; }.control:hover input ~.control_indicator, .control input:focus ~.control_indicator { background: #cccccc; }.control input:checked ~.control_indicator { background: #008736; }.control:hover input:not([disabled]):checked ~.control_indicator, .control input:checked:focus ~.control_indicator { background: #008736; }.control input:disabled ~.control_indicator { background: #008736; opacity: 0.6; pointer-events: none; }.control_indicator:after { box-sizing: unset; content: ''; position: absolute; display: none; }.control input:checked ~.control_indicator:after { display: block; }.control-checkbox.control_indicator:after { left: 8px; top: 4px; width: 3px; height: 8px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); }.control-checkbox input:disabled ~.control_indicator:after { border-color: #008736; }.control-checkbox.control_indicator::before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 4.5rem; height: 4.5rem; margin-left: -1.3rem; margin-top: -1.3rem; background: #008736; border-radius: 3rem; opacity: 0.6; z-index: 99999; transform: scale(0); } /* The ripple effect */ @keyframes s-ripple { 0% { transform: scale(0); } 20% { transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } @keyframes s-ripple-dup { 0% { transform: scale(0); } 30% { transform: scale(1); } 60% { transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }.control-checkbox input +.control_indicator::before { animation: s-ripple 250ms ease-out; }.control-checkbox input:checked +.control_indicator::before { animation-name: s-ripple-dup; }

 <label><input type="checkbox" value="">Option 1</label> <div class="control-group"> <label class="control control-checkbox"> label <input type="checkbox" checked="checked" /> <div class="control_indicator"></div> </label> </div>

Answer 3

我認為您最終想要的是看到假的“復選框”選中/取消選中，所以我舉了一個切換 class 對的示例，無論您單擊行的哪個位置。

 $('#belowtable').on('click', '.checkboxinfotd', function(e) { let clickeditem = $(this) let myparent = clickeditem.closest('tr').find('.checkboxtd').trigger('click'); }).on('click', '.checkboxtd', function(e) { let clickeditem = $(this); let cb = clickeditem.find('.checkbutton.fa'); cb.toggleClass('fa-square-o').toggleClass('fa-check-square'); });

 .checkboxinfotd { cursor: pointer; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="belowtable"> <tbody class="scenariotbody"> <tr> <td colspan="2"> Text </td> </tr> <tr> <td class="checkboxtd"><i class="checkbutton fa fa-square-o" aria-hidden="true" id="plan-282"></i> </td> <td class="checkboxinfotd">Finance department</td> </tr> <tr> <td class="checkboxtd"><i class="checkbutton fa fa-square-o" aria-hidden="true" id="plan-289"></i> </td> <td class="checkboxinfotd">Sales department</td> </tr> </tbody> </table>