Question

今天你可以选择sinlge但是如果我想通过复选输入框（文本“Name”的左侧）来选择所有内容。

我不知道怎么做？

信息。
另一件需要考虑的事情。如果您选择了单行，则要选择包含所选择的一行或多行。还有一件事。不应通过更改背景颜色来选择标题。

谢谢！

$("table input[type=checkbox]").on("change", function() {
    if (this.checked) {
        $(this).parents('tr').addClass('selected');
    } else {
        $(this).parents('tr').removeClass('selected');
    }  
});

tr.selected { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th><input type="checkbox" /></th>
            <th>Name</th>
            <th>Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name 1</td>
            <td>Location 1</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name 2</td>
            <td>Location 2</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Name 3</td>
            <td>Location 3</td>
        </tr>
    </tbody>
</table>

“http://jsfiddle.net/jcftsazk/9/”

Answer 1

你应该为此使用类。然后，当单击标题复选框时，只需循环所有其他复选框并选中或取消选中它们。这是一个例子。

＆＃13;

$('#headerCheckBox').click(function () {
    var checked = $("#headerCheckBox").is(':checked');
   $(".checkbox").each(function () {
     $(this).prop('checked', checked);
     if (checked) {
          $(this).parents('tr').addClass('selected');
       } 
       else {
          $(this).parents('tr').removeClass('selected');
       } 
   });
});

＆＃13;

.rows.selected { background-color: yellow; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th><input id="headerCheckBox" type="checkbox"/></th>
            <th>Name</th>
            <th>Location</th>
        </tr>
    </thead>
    <tbody>
        <tr class="rows">
            <td><input class="checkbox" type="checkbox" /></td>
            <td>Name 1</td>
            <td>Location 1</td>
        </tr>
        <tr class="rows">
            <td><input class="checkbox" type="checkbox" /></td>
            <td>Name 2</td>
            <td>Location 2</td>
        </tr>
        <tr class="rows">
            <td><input class="checkbox" type="checkbox" /></td>
            <td>Name 3</td>
            <td>Location 3</td>
        </tr>
    </tbody>
</table>

＆＃13;

Answer 2

没有检查选中的方框所有试试这个......

https://jsfiddle.net/sdc90qev/1/

$('#selectall').change(function() {
  var checkboxes = $(this).closest('table').find(':checkbox');
  if($(this).is(':checked')) {
      checkboxes.prop('checked', 'checked');
      $('tr').addClass('selected');
  } else {
        checkboxes.prop('checked', '');
        $('tr').removeClass('selected');
  }
});

添加id =＆＃34; selectall＆＃34;到了

 <th><input id="selectall" type="checkbox" /></th>

Answer 3

您可以在标题行中添加一个ID，用于选择所有tr元素并突出显示它们。

$("#header").on("change", function() {
    if (this.checked) {
        var t = $("tr").slice(1);
        t.addClass('selected');
    } else {
        $('tr').removeClass('selected');
    }  
});

然后使用CSS3 :not()选择器进行其他复选框点击

$("table input[type=checkbox]:not(#header)").on("change", function() {
    if (this.checked) {
       $(this).parents('tr').addClass('selected');
    } else {
        $(this).parents('tr').removeClass('selected');
    }  
});

这是更新的小提琴：http://jsfiddle.net/jcftsazk/11/

更新

我已更新小提琴以检查所有复选框：http://jsfiddle.net/jcftsazk/12/

$("#header").on("change", function() {
    if (this.checked) {
        var t = $("tr").slice(1);
        t.addClass('selected');
        $("input[type=checkbox]", t).prop("checked", true);
    } else {
        $('tr').removeClass('selected');
        $("input[type=checkbox]", t).prop("checked", false);
    }  
});

我使用$("input[type=checkbox]", t)仅选中表格集中的复选框。

在表格中一次选择多行

3 个答案: