Jquery - HackMD

# Jquery ###### tags: `Learning` ## Selector ### 找出屬性 name 包含 Result & 選擇的 value 為 Finished 的下拉選單(select) ``` $("select[name*=Result] option[value=Finished]:selected") ``` ### 找出 select 元素中 name 開頭為 PaperRule_Conditions、結尾為 SubjectCode 的元素 ``` $("select[name^='PaperRule_Conditions'][name$='SubjectCode']") ``` --- ## Encode / Decode ![](https://i.imgur.com/D9ZzmUc.png) --- ## jQuery 如何提前跳離jQuery.each()迴圈要提前離開jQuery.each()迴圈的方法如下。在each()的callback函式中return false即可離開迴圈，也就是for迴圈的break的效果。若在callback函式只有return則相當於continue。參考下面範例。 ``` var employees = ["john","mary","bill","tom","ken"]; $.each(employees,function(i,value){ if(i == 1){return;} // continue if(i == 3){return false;} // break console.log(value); }); ``` 執行後印出如下。 > john > bill [參考](https://matthung0807.blogspot.com/2017/10/jquery-jqueryeach.html) --- ## 如何啟用/停用元素？ HTML ``` <body> <input type="button" value="disabled" id="disBtn" /> <input type="button" value="enabled" id="enBtn" /> <hr /> <input type="text" name="txt" class="form_ele" value="abgne.tw" /> <br /> <select name="sel" class="form_ele"> <option value="01">01</option> <option value="02">02</option> </select> </body> ``` Jquery ``` // 停用元素 // 方法 1： $('.form_ele').attr('disabled', true); // 方法 2： $('.form_ele').attr('disabled', 'disabled'); // 啟用元素 // 方法 1： $('.form_ele').attr('disabled', false); // 方法 2： $('.form_ele').attr('disabled', ''); ``` [參考](https://abgne.tw/jquery/jquery-tips/jquery-enabled-or-disabled-element.html) --- ## CheckBox 事件 ``` $("#checkbox1").click(function (e) { if ($(this).is(':checked')) { alert('check') } else { } }) ``` --- ## 避免重複註冊事件解綁再綁 ( 沒事件時解綁，也不會壞 ) off 在 on ![](https://i.imgur.com/xQxafEn.png) ``` $("#YesOrNoModal_btnNo").off("click").on("click", function () { callback(false); $("#YesOrNoModal").modal('hide'); }); ``` --- ## 清除表單的前端驗證屬性 ``` $("#SomeForm").validate().destroy(); ``` --- ## 針對 th 的 input 異動去調整對應 td(欄位) 內容如果 input 在 th 中，找到觸發元素的 th 元素 https://jsfiddle.net/4xjupg7b/1/ ### JS ``` function chk_Checked(e) { // 找到 button 的 th 元素 const thElement = $(e).closest("th"); // 獲取該 th 元素在其父元素（tr）中的索引（從0開始） const columnIndex = thElement.index(); // 使用該索引找到所有相對應的 td 元素 const tdElements = $(`tbody td:nth-child(${columnIndex + 1})`); tdElements.find("input[type=checkbox]").prop("checked", $(e).prop("checked")) console.log(tdElements); } ``` ### HTML ``` <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <table id="table" data-locale="zh-TW" data-loading-template="<i class="fa fa-spinner fa-spin fa-fw fa-2x custom-text-main"></i>" data-pagination-v-align="top" data-pagination="true" data-page-list="[10, 25, 50, 100, 500, all]" data-page-size="100" data-search="true" data-search-highlight="true" data-show-search-clear-button="true" class="border border-1 table table-bordered table-hover"> <thead class=""> <tr> <th style="" data-field="Item"> <div class="th-inner ">Item</div> <div class="fht-cell"></div> </th> <th style="" data-field="SpecMin"> <div class="th-inner ">Min.</div> <div class="fht-cell"></div> </th> <th style="" data-field="SpecMax"> <div class="th-inner ">Max.</div> <div class="fht-cell"></div> </th> <th style="" data-field="LowerLimit"> <div class="th-inner ">下限</div> <div class="fht-cell"></div> </th> <th style="" data-field="Average"> <div class="th-inner ">平均值</div> <div class="fht-cell"></div> </th> <th style="" data-field="UpperLimit"> <div class="th-inner ">上限</div> <div class="fht-cell"></div> </th> <th style="" data-field="檢查方式"> <div class="th-inner ">檢查方式<input type="checkbox" class="form-check-input ms-2 mb-1" id="chkCheckWayAll" name="chkCheckWayAll" onchange="chk_Checked(this)"></div> <div class="fht-cell"></div> </th> <th style="" data-field="自動計算"> <div class="th-inner ">自動計算<input type="checkbox" class="form-check-input ms-2 mb-1" id="chkAutoCal" name="chkAutoCal" onchange="chk_Checked(this)"></div> <div class="fht-cell"></div> </th> <th style="" data-field="啟動"> <div class="th-inner ">啟動<input type="checkbox" class="form-check-input ms-2 mb-1" id="chkActive" name="chkActive" onchange="chk_Checked(this)"></div> <div class="fht-cell"></div> </th> </tr> </thead> <tbody> <tr data-index="0"> <td>TEL FURNACE GAS FILITER (S400799)</td> <td></td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td><input type="checkbox" class="form-check-input" id="chkActive_[0]" name="chkActive[0]"></td> </tr> <tr data-index="1"> <td>PADDLE T/C CONNECTOR MODULE (S018363)</td> <td></td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td><input type="checkbox" class="form-check-input" id="chkActive_[1]" name="chkActive[1]"></td> </tr> <tr data-index="2"> <td>Main Heater Over Temperature interlock check -1</td> <td></td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td><input type="checkbox" class="form-check-input" id="chkActive_[2]" name="chkActive[2]"></td> </tr> <tr data-index="3"> <td>Main Heater Over Temperature interlock check -2</td> <td></td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td><input type="checkbox" class="form-check-input" id="chkActive_[3]" name="chkActive[3]"></td> </tr> <tr data-index="4"> <td>Main Heater Over Temperature interlock check -3</td> <td></td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td><input type="checkbox" class="form-check-input" id="chkActive_[4]" name="chkActive[4]"></td> </tr> </tbody> </table> ``` --- ## 使用 filter 方法來篩選出被選中 input 元素的數量 JS ``` var checkedInputs = $("input[id*='copy_']").filter(":checked"); var checkedCount = checkedInputs.length; ``` HTML ``` <div id="modalCopy-equips" class="container mt-3 d-flex flex-row flex-wrap"> <div class="form-check" style="margin: 10px;"> <input class="form-check-input" type="checkbox" id="copy_F2E404" value="F2E404" checked=""> <label class="form-check-label" for="copy_F2E404">CEL02</label> </div> <div class="form-check" style="margin: 10px;"> <input class="form-check-input" type="checkbox" id="copy_F2E405" value="F2E405" checked=""> <label class="form-check-label" for="copy_F2E405">CEL03</label> </div> <div class="form-check" style="margin: 10px;"> <input class="form-check-input" type="checkbox" id="copy_F2E406" value="F2E406" checked=""> <label class="form-check-label" for="copy_F2E406">CEL04</label> </div> <div class="form-check" style="margin: 10px;"> <input class="form-check-input" type="checkbox" id="copy_F2E390" value="F2E390" checked=""> <label class="form-check-label" for="copy_F2E390">FLD01</label> </div> <div class="form-check" style="margin: 10px;"> <input class="form-check-input" type="checkbox" id="copy_F2E391" value="F2E391" checked=""> <label class="form-check-label" for="copy_F2E391">FLD02</label> </div> <div class="form-check" style="margin: 10px;"> <input class="form-check-input" type="checkbox" id="copy_F2E392" value="F2E392" checked=""> <label class="form-check-label" for="copy_F2E392">FLD03</label> </div> <div class="form-check" style="margin: 10px;"> <input class="form-check-input" type="checkbox" id="copy_F2E393" value="F2E393" checked=""> <label class="form-check-label" for="copy_F2E393">FLD04</label> </div> </div> ```