Question

我创建了一个隐藏的表格行（id="table-row-span"），该行在被点击复选框（id="select_all"）触发之前一直处于隐藏状态。此时显示先前隐藏的行并显示＆＃34;此页面上显示的所有条目均已选中。选择此表中的所有条目。＆＃34;

我正在寻找一个脚本，当＆＃34; all＆＃34;用户单击Dropbox中的条目，然后每行显示，并显示为选中标记。屏幕截图也显示了。任何帮助都会非常感谢。

Screenshot

Answer 1

这是一个例子，我认为这是一般的想法

http://output.jsbin.com/fuwole

<!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Select All</title>
    <style>
      table {
        border-collapse: collapse;
        width: 500px;
      }
      table, th, td {
        border: 1px solid #444444;
      }
      #all_selected, #none_selected, #some_selected {
        color: #0000ff;
      }
      #all_selected, #some_selected {
        display: none;
      }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
    // @see http://stackoverflow.com/questions/39705478/javascript-for-show-all-dropdown-on-datatable/39708801#39708801
    $(function() {
      // the user checks the "check all"
      $('#check_all').click(function() {
        if($(this).prop('checked')) {
          // check all rows
          $('.data .checked').prop('checked', true);
          // show the correct message
          $('.message').hide();
          $('#all_selected').show();
        }
        else {
          // uncheck all rows
          $('.data .checked').prop('checked', false);
          $('.message').hide();
          $('#none_selected').show();
        }
      });
      // the user checks a data checkbox
      $('.data .checked').click(function() {
        // count how many are checked
        var rowsChecked = $('.data .checked:checked').length;
        var totalRows = $('.data .checked').length;
        if(rowsChecked == 0) {
          $('.message').hide();
          $('#none_selected').show();
          $('#check_all').prop('checked', false);
        }
        else if(rowsChecked == totalRows) {
          $('.message').hide();
          $('#all_selected').show();
          // let's also check the check all
          $('#check_all').prop('checked', true);
        }
        else {
          $('.message').hide();
          $('#some_selected').show();
          $('#check_all').prop('checked', false);
        }
      });
    });
    </script>
  </head>
  <body>
    <table>
      <tr>
        <th style="text-align: left"> <input id="check_all" type="checkbox"/> </th>
        <th> Name </th>
        <th> Type </th>
      </tr>
      <tr id="all_selected" class="message">
        <td colspan="3"> All entries shown on this page are selected </td>
      </tr>
      <tr id="none_selected" class="message">
        <td colspan="3"> Select all entries in this table </td>
      </tr>
      <tr id="some_selected" class="message">
        <td colspan="3">Some are checked &nbsp;</td>
      </tr>

      <tr class="data">
        <td> <input class="checked" type="checkbox"/> </td>
        <td> Row 1 </td>
        <td> Type 1 </td>
      </tr>
      <tr class="data">
        <td> <input class="checked" type="checkbox"/> </td>
        <td> Row 2 </td>
        <td> Type 2 </td>
      </tr>
      <tr class="data">
        <td> <input class="checked" type="checkbox"/> </td>
        <td> Row 3 </td>
        <td> Type 3 </td>
      </tr>
    </table>
  </body>
</html>

Javascript for＆＃34;显示所有下拉列表＆＃34;在数据表上

1 个答案: