HTML行表格选择

Question

我有一个表格，第一列是复选框，用于选择当前行，标题栏还有一个全选复选框。当用户点击行时，表格也会被选中（复选框变为选中状态）。

我的问题是，当我全选时，所有复选框都被选中了，但是行没有被选中。

我的复选框具有更改函数，因此我认为当我选中全部时，更改方法也将执行，但实际上并没有发生。

$(document).ready(function() {

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

  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });

  $("input[type='checkbox']").change(function(e) {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlight_row");
    } else {
      $(this).closest('tr').removeClass("highlight_row");
    }
  });
});

.record_table {
  width: 100%;
  border-collapse: collapse;
}
.record_table tr:hover {
  background: #eee;
}
.record_table td {
  border: 1px solid #eee;
}
.highlight_row {
  background: #eee;
}

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<table class="record_table" id="table-patient-time">
  <tr class="header">
    <th>
      <input type="checkbox" id="selectAll" />
    </th>
    <th>Hello</th>
    <th>Hello</th>
  </tr>
  <tr class="selectable">
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

JS Fiddle here

- Vlad N

---

更改仅在用户更改值时触发。 - epascarello

Answer 1

点击此处查看演示。

你可以添加 highlight_row 类，并在 selectAll 点击事件中移除它：

$('#selectAll').click(function(event) {
    if(this.checked) {
      // Iterate each checkbox
        $(':checkbox').each(function() {
          this.checked = true;
          $(this).closest('tr').addClass('highlight_row');
        });
    }
    else {
        $(':checkbox').each(function() {
          this.checked = false;
          $(this).closest('tr').removeClass('highlight_row');
        });
    }
});

希望这能帮到你。

---

$(document).ready(function () {

    $('#selectAll').click(function(event) {
        if(this.checked) {
          // Iterate each checkbox
            $(':checkbox').each(function() {
              this.checked = true;
              $(this).closest('tr').addClass('highlight_row');
            });
        }
        else {
            $(':checkbox').each(function() {
              this.checked = false;
              $(this).closest('tr').removeClass('highlight_row');
            });
        }
    });

  $('.record_table tr').click(function (event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });

  $("input[type='checkbox']").change(function (e) {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlight_row");
    } else {
      $(this).closest('tr').removeClass("highlight_row");
    }
  });
});

.record_table {
    width: 100%;
    border-collapse: collapse;
}
.record_table tr:hover {
    background: #eee;
}
.record_table td {
    border: 1px solid #eee;
}
.highlight_row {
    background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="record_table" id="table-patient-time">
<tr class="header">
        <th>
            <input type="checkbox" id= "selectAll" />
        </th>
        <th>Hello</th>
        <th>Hello</th>
    </tr>
    <tr class="selectable">
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>Hello</td>
        <td>Hello</td>
    </tr>
</table>

- Zakaria Acharki

---

这个代码可以工作，但是有重复的添加和删除类的代码..我认为更简单的版本是在selectAll点击时调用change方法，就像上面的例子一样。感谢您的快速回复。这对我很有帮助。 - Vlad N

Answer 2

您可以通过在点击事件中触发更改事件来解决此问题：

  $('#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();
    }
  });

$(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();
    }
  });

  $('.record_table tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });

  $("input[type='checkbox']").change(function(e) {
    if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("highlight_row");
    } else {
      $(this).closest('tr').removeClass("highlight_row");
    }
  });
});

.record_table {
  width: 100%;
  border-collapse: collapse;
}
.record_table tr:hover {
  background: #eee;
}
.record_table td {
  border: 1px solid #eee;
}
.highlight_row {
  background: #eee;
}

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<table class="record_table" id="table-patient-time">
  <tr class="header">
    <th>
      <input type="checkbox" id="selectAll" />
    </th>
    <th>Hello</th>
    <th>Hello</th>
  </tr>
  <tr class="selectable">
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

- jcubic

---

当使用prop()时，jQuery会在内部执行each，因此无需手动执行。 - epascarello

我发现了一个问题...我不得不在页面上放置另一个复选框，它与表格中的复选框无关，而selectAll现在也检查它。 - Vlad N

给那个复选框添加类，并使用 $(':checkbox').not('.class')。 - jcubic

Answer 3

我只会触发更改，而不是在多个地方使用逻辑。

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

$("input[type='checkbox']").change(function (e) {
    $(this).closest('tr').toggleClass("highlight_row", this.checked);
});

现在针对HTML的建议是，应该使用``和``标签，而不是使用类来表示表头行。

- epascarello

Answer 4

JsFiddle

对您的工作示例进行了小调整，向需要更改的复选框分派了一个click事件。这应该可以正确触发那些框的onchange事件。

新的部分如下：

if(this.checked) {
// Iterate each checkbox
  $(':checkbox').not(":checked").click()
}
else {
  $(':checkbox:checked').click()
}

- jmcgriz