仅从表中选中所有复选框,而不从其他表中选中所有复选框

Select all check boxes just from a table and not others

本文关键字:复选框 其他      更新时间:2023-09-26

我在使用一些代码时遇到了一些问题。

我正在尝试从表中选择所有复选框,而不是其他复选框。

有一些代码正在运行,但这从页面中选择所有复选框,我只想从特定表中选择。如何告诉我的 selectAll 仅从此特定表中选取?

我的代码在下面或这里的 Jsfiddle 链接

JSFiddle

$(document).ready(function() {
  $('#selectAll').click(function(event) {
    if (this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
        this.checked = true;
      }).change();
    } else {
      $(':checkbox').each(function() {
        this.checked = false;
      }).change();
    }
  });
  $('.fixed_headers tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
  $("td input[type='checkbox']").change(function(e) {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlighted");
    } else {
      $(this).closest('tr').removeClass("highlighted");
    }
  });
});
html {
  height: 100%;
  width: 100%
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #E8EFFA;
}
.dialogTitle {
  height: 20px;
  background-color: #F2F0E6;
  font: bold 8pt Tahoma Black;
  text-align: left;
  padding-top: 5px;
  padding-left: 5px;
  border: 1px solid #FFFFFF;
  border-top: 1px solid #F2DCB1;
  border-bottom: 1px solid #6C8CD9;
}
.header {
  background-color: #fffdf2;
  color: #000000;
  cursor: default;
  width: 100%;
  height: 40px;
  margin: 0px;
  padding: 5px;
}
.tableDiv {
  height: 50%;
  padding-top: 5px;
  padding-left: 5px;
  border-bottom: 1px solid #FFFFFF;
}
.tableTitle {
  height: 20px;
  background-color: #D4DFFA;
  font: bold 9pt Tahoma Black;
  text-align: left;
  padding-top: 5px;
  padding-left: 5px;
  outline: 1px solid #6C8CD9;
  border: 1px solid #FFFFFF;
}
.tableSection {
  height: 20px;
  background-color: #D4DFFA;
  font: bold 9pt Tahoma Black;
  text-align: left;
  padding-top: 5px;
  padding-left: 5px;
  border: 1px solid #FFFFFF;
}
.tableDiv {
  height: 100%;
  width: 99%;
  margin: 0;
  padding: 0;
  position: absolute;
  backgroun-color: #FF0;
}
.tableFunction {
  height: 20px;
  background-color: #D4DFFA;
  color: #737373;
  font: 8pt Tahoma;
  text-align: left;
  padding-top: 5px;
  padding-left: 5px;
  border: 1px solid #FFFFFF;
  border-top: 0px;
}
.hd {
  margin-left: -2px;
  background-image: url('../img/BGButton_Image_00.gif');
  border-left: 1px solid #EBEFF3;
  border-right: 1px solid #EBEFF3;
  border-bottom: 1px solid #A8BBE0;
  text-align: left;
  color: #737373;
  font: normal 8pt Tahoma;
  padding-left: 4px;
  border-top: 1px solid #A8BBE0;
  height: 20px;
  position: absolute;
  top: 0px;
}
.fixed_headers {
  height: 50%;
  width: 100%;
  border-spacing: 0;
}
.fixed_headers td {
  border-right: 1px solid #EBEFF3;
  border-top: 1px solid #EBEFF3;
  padding-left: 4px;
  padding-right: 4px;
  text-align: left;
  height: 20px;
  font: normal 8pt Tahoma;
}
.fixed_headers tr:nth-child(odd) {
  background-color: #f0f4fa;
}
.fixed_headers tr:nth-child(even) {
  background-color: #ffffff;
}
.fixed_headers tr.highlighted {
  color: #261F1D;
  background-color: #FFCC66;
}
.fixed_headers tr.header {
  height: 1px;
}
.fixed_headers tr.selectable:hover {
  color: #261F1D;
  background-color: #FFE8BA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="fixed_headers">
  <thead>
    <tr>
      <th>
        <input type='checkbox' id="selectAll" name='selectAll' />
      </th>
      <th>
        Two
      </th>
      <th>
        Three
      </th>
      <th>
        Four
      </th>
      <th>
        Five
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
  </tbody>
</table>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

将选择器更改为仅在table中包含:

$('#selectAll').click(function(event) {
  if (this.checked) {
    // Iterate each checkbox
    $('table :checkbox').each(function() {            // «--- Changed here
      this.checked = true;
    }).change();
  } else {
    $('table :checkbox').each(function() {            // «--- Changed here
      this.checked = false;
    }).change();
  }
});

完整片段

$(document).ready(function() {
  $('#selectAll').click(function(event) {
    if (this.checked) {
      // Iterate each checkbox
      $('table :checkbox').each(function() {
        this.checked = true;
      }).change();
    } else {
      $('table :checkbox').each(function() {
        this.checked = false;
      }).change();
    }
  });
  $('.fixed_headers tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
  $("td input[type='checkbox']").change(function(e) {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlighted");
    } else {
      $(this).closest('tr').removeClass("highlighted");
    }
  });
});
html {
  height: 100%;
  width: 100%
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #E8EFFA;
}
.dialogTitle {
  height: 20px;
  background-color: #F2F0E6;
  font: bold 8pt Tahoma Black;
  text-align: left;
  padding-top: 5px;
  padding-left: 5px;
  border: 1px solid #FFFFFF;
  border-top: 1px solid #F2DCB1;
  border-bottom: 1px solid #6C8CD9;
}
.header {
  background-color: #fffdf2;
  color: #000000;
  cursor: default;
  width: 100%;
  height: 40px;
  margin: 0px;
  padding: 5px;
}
.tableDiv {
  height: 50%;
  padding-top: 5px;
  padding-left: 5px;
  border-bottom: 1px solid #FFFFFF;
}
.tableTitle {
  height: 20px;
  background-color: #D4DFFA;
  font: bold 9pt Tahoma Black;
  text-align: left;
  padding-top: 5px;
  padding-left: 5px;
  outline: 1px solid #6C8CD9;
  border: 1px solid #FFFFFF;
}
.tableSection {
  height: 20px;
  background-color: #D4DFFA;
  font: bold 9pt Tahoma Black;
  text-align: left;
  padding-top: 5px;
  padding-left: 5px;
  border: 1px solid #FFFFFF;
}
.tableDiv {
  height: 100%;
  width: 99%;
  margin: 0;
  padding: 0;
  position: absolute;
  backgroun-color: #FF0;
}
.tableFunction {
  height: 20px;
  background-color: #D4DFFA;
  color: #737373;
  font: 8pt Tahoma;
  text-align: left;
  padding-top: 5px;
  padding-left: 5px;
  border: 1px solid #FFFFFF;
  border-top: 0px;
}
.hd {
  margin-left: -2px;
  background-image: url('../img/BGButton_Image_00.gif');
  border-left: 1px solid #EBEFF3;
  border-right: 1px solid #EBEFF3;
  border-bottom: 1px solid #A8BBE0;
  text-align: left;
  color: #737373;
  font: normal 8pt Tahoma;
  padding-left: 4px;
  border-top: 1px solid #A8BBE0;
  height: 20px;
  position: absolute;
  top: 0px;
}
.fixed_headers {
  height: 50%;
  width: 100%;
  border-spacing: 0;
}
.fixed_headers td {
  border-right: 1px solid #EBEFF3;
  border-top: 1px solid #EBEFF3;
  padding-left: 4px;
  padding-right: 4px;
  text-align: left;
  height: 20px;
  font: normal 8pt Tahoma;
}
.fixed_headers tr:nth-child(odd) {
  background-color: #f0f4fa;
}
.fixed_headers tr:nth-child(even) {
  background-color: #ffffff;
}
.fixed_headers tr.highlighted {
  color: #261F1D;
  background-color: #FFCC66;
}
.fixed_headers tr.header {
  height: 1px;
}
.fixed_headers tr.selectable:hover {
  color: #261F1D;
  background-color: #FFE8BA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="fixed_headers">
  <thead>
    <tr>
      <th>
        <input type='checkbox' id="selectAll" name='selectAll' />
      </th>
      <th>
        Two
      </th>
      <th>
        Three
      </th>
      <th>
        Four
      </th>
      <th>
        Five
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>Text</td>
      <td>image</td>
      <td>Text</td>
      <td>image</td>
    </tr>
  </tbody>
</table>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

更优雅的方式是使用:

$('#selectAll').click(function(event) {
  var state = this.checked;
  $('.fixed_headers :checkbox').prop( 'checked' , state ).change();
});

有关更多信息,请参阅小提琴。感谢用户3613129。

使用 table input[type=checkbox]table :checkbox 而不是 :checkbox 作为 jQuery 选择器。在 JSFiddle 中试用

试试这个选择器:$('table.fixed_headers input[type=checkbox]:checked')

您可以将选择器更新为 table_class + input[type='checkbox'] 。您还可以通过使用 self 摆脱整个if..else状况。

更新的 JSFiddle

@user3613129正确地指出,摆脱.each

$('#selectAll').click(function(event) {
  var self = this;
  $('.fixed_headers input[type="checkbox"]')
    .prop("checked", self.checked)
    .change();
});