javascript - 选中 Column 中的所有复选框，并在选中另一列时取消选中它们

Question

我一直无法完成这项工作。我有 2 个带复选框的列，每列中有 1 个复选框用于选择所有其他列。

Example

问题是，当我选择另一列时，子复选框保持选中状态

Example 2

我正在使用下一个 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>
                                        &nbsp;&nbsp;<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>
                                        &nbsp;&nbsp;<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>

感谢帮助

Answer 1

您可以先取消选中所有复选框(当前单击的除外)，然后选中所需的复选框:

//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> &nbsp;&nbsp;
        <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> &nbsp;&nbsp;
        <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>