从表中选择所有复选框，而不是其他复选框

时间：2016-03-14 12:19:40

标签： javascript jquery html css

我遇到了一些代码问题。

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

我运行了一些代码，但是这会选择页面中的所有复选框，而我只想从特定的表中选择。我如何告诉我的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">

4 个答案:

答案 0 :(得分：3)

将选择器更改为仅包含在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();
});

有关详细信息，请参阅fiddle。感谢user3613129。

答案 1 :(得分：2)

对jQuery选择器使用table input[type=checkbox]或table :checkbox而不是:checkbox。 Try in JSFiddle

答案 2 :(得分：1)

尝试使用此选择器：$('table.fixed_headers input[type=checkbox]:checked')

答案 3 :(得分：0)

您可以将选择器更新为table_class + input[type='checkbox']。您还可以使用if..else删除整个self条件。

Updated JSFiddle

@ user3613129正确指出，摆脱.each 

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