選中列中的所有復選框，並在檢查其他列時取消選中它們
[英]Select all checkboxes in Column and deselect them when checking another column
問題描述
我一直無法完成這項工作。 我有兩列復選框，每列有一個復選框，用於選擇所有其他復選框。
問題是當我選擇其他列時，子復選框保持選中狀態
我正在使用下一個jquery函數使其工作，但它只是部分工作
用於選擇所有復選框的腳本：
$("th input[type='checkbox']").on("change", function () {
debugger;
var cb = $(this), //checkbox that was changed
th = cb.parent(), //get parent th
col = th.index() + 1; //get column index. note nth-child starts at 1, not zero
$("tbody td:nth-child(" + col + ") input").prop("checked", this.checked); //select the inputs and [un]check it
});
腳本只選擇所需列中的復選框：
$('table').attr('id', 'test');
$('input[type="checkbox"]').on('change', function () {
var checado = $(this).prop('checked');
$(this).closest('tr').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', false);
});
$(this).prop("checked", checado);
});
HTML：
<table class="table table-responsive grid-table" id="test">
<thead>
<tr>
<th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt">
<span class="mvc-grid-header-title">Folio</span>
</th>
<th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt">
<span class="mvc-grid-header-title">Banco Destino</span>
</th>
<th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt">
<span class="mvc-grid-header-title">Tipo de documento</span>
</th>
<th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt">
<span class="mvc-grid-header-title">Estado</span>
</th>
<th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt">
<span class="mvc-grid-header-title">Conforme</span>
<input type="checkbox" id="checkConforme"> </th>
<th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt">
<span class="mvc-grid-header-title">No conforme</span>
<input type="checkbox" id="checkNoConforme"> </th>
<th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt">
<span class="mvc-grid-header-title">Comentarios</span>
</th>
<th class=" hidden" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt">
<span class="mvc-grid-header-title">lolol</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">2017100000793</td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">058 - Banregio</td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">Copia certificada</td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">ENTREGADO</td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="checkbox" class="chb" value="2017100000793|1| " name="check" id="conforme"></td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="checkbox" class="chb" value="2017100000793|0| " name="check" id="noConforme"></td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="text" class="lol" style="width:100%" value="" name="comentarioCierre" id="comentarioCierre" pattern="^[A-Za-zÀ-úÑñ 0-9]{1,}$"></td>
<td class="hidden" style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"> </td>
</tr>
<tr>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">2017100000790</td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">058 - Banregio</td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">Imagen</td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">ATENDIDO</td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="checkbox" class="chb" value="2017100000790|1|" name="check" id="conforme"></td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="checkbox" class="chb" value="2017100000790|0|" name="check" id="noConforme"></td>
<td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="text" class="lol" style="width:100%" value="" name="comentarioCierre" id="comentarioCierre" pattern="^[A-Za-zÀ-úÑñ 0-9]{1,}$"></td>
<td class="hidden" style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"></td>
</tr>
</tbody>
</table>
謝謝您的幫助
1 個解決方案
解決方案1
1 已采納 2017-10-25 16:13:19
您可以先取消選中所有復選框（當前單擊除外），然后檢查所需的復選框：
//Uncheck all the checkboxes except the current clicked
$("table input:checkbox").not(this).prop("checked", false);
希望這可以幫助。
$("th input[type='checkbox']").on("change", function() { debugger; //Uncheck all the checkboxes except the current clicked $("table input:checkbox").not(this).prop("checked", false); var cb = $(this), //checkbox that was changed th = cb.parent(), //get parent th col = th.index() + 1; //get column index. note nth-child starts at 1, not zero $("tbody td:nth-child(" + col + ") input").prop("checked", this.checked); //select the inputs and [un]check it });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-responsive grid-table" id="test"> <thead> <tr> <th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt"> <span class="mvc-grid-header-title">Folio</span> </th> <th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt"> <span class="mvc-grid-header-title">Banco Destino</span> </th> <th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt"> <span class="mvc-grid-header-title">Tipo de documento</span> </th> <th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt"> <span class="mvc-grid-header-title">Estado</span> </th> <th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt"> <span class="mvc-grid-header-title">Conforme</span> <input type="checkbox" id="checkConforme"> </th> <th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt"> <span class="mvc-grid-header-title">No conforme</span> <input type="checkbox" id="checkNoConforme"> </th> <th class="" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt"> <span class="mvc-grid-header-title">Comentarios</span> </th> <th class=" hidden" style="text-align:left; background-color:#ffffff;border: 1px solid #cccaca; color:#27a2fb; font-family:Helvetica; font-size:10.5pt"> <span class="mvc-grid-header-title">lolol</span> </th> </tr> </thead> <tbody> <tr> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">2017100000793</td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">058 - Banregio</td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">Copia certificada</td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">ENTREGADO</td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="checkbox" class="chb" value="2017100000793|1| " name="check" id="conforme"></td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="checkbox" class="chb" value="2017100000793|0| " name="check" id="noConforme"></td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="text" class="lol" style="width:100%" value="" name="comentarioCierre" id="comentarioCierre" pattern="^[A-Za-zÀ-úÑñ 0-9]{1,}$"></td> <td class="hidden" style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"> </td> </tr> <tr> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">2017100000790</td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">058 - Banregio</td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">Imagen</td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt">ATENDIDO</td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="checkbox" class="chb" value="2017100000790|1|" name="check" id="conforme"></td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="checkbox" class="chb" value="2017100000790|0|" name="check" id="noConforme"></td> <td style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"><input type="text" class="lol" style="width:100%" value="" name="comentarioCierre" id="comentarioCierre" pattern="^[A-Za-zÀ-úÑñ 0-9]{1,}$"></td> <td class="hidden" style="font-family:Helvetica;border: 1px solid #cccaca; font-size:10pt"></td> </tr> </tbody> </table>
當取消選中一個或多個項目時，knockout.js取消選擇/選中所有復選框
[英]knockoutjs deselect/select all checkboxes when one or more items deselected
Angular 6 + Bootstrap 4選擇全部並取消選中所有復選框
[英]Angular 6 + Bootstrap 4 Select all and Deselect all Checkboxes
使用Javascript選擇/取消選擇Rails 4中的所有動態復選框
[英]Select/Deselect All dynamic checkboxes in Rails 4 with Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.