Question

我有一个表，其中第一列是一个复选框，用于选择当前行，标题具有SelectAll复选框。当用户单击该行时，该表也会被选中（复选框将被选中）。

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

我的复选框有更改功能所以我假设当我点击全部选择时，更改方法也会执行，但这不会发生。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

JS Fiddle here

Answer 1

<强> Working fiddle

您可以在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>

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>

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做的是你应该使用thead和tbody而不是使用类来说你有一个行。

Answer 4

JsFiddle

对您的工作示例进行了一些小调整，将click事件发送到需要更改的复选框。这应该适当地触发那些框的onchange事件

新部分如下所示：

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

HTML行表选择

4 个答案: