チェックボックス（id="select_all"）をクリックすると、表示されるまで非表示になっている隠しテーブル行（id="table-row-span"）が作成されました。この時点で、以前隠された行が表示され、「このページに表示されているすべてのエントリが選択されています。このテーブルのすべてのエントリを選択してください」と表示されます。データテーブルの "すべてのドロップダウンを表示"のJavascript
Dropboxの「すべて」のエントリをユーザーがクリックしたときにすべての行が表示され、チェックマークが付いたように見えるスクリプトを探しています。スクリーンショットも表示されます。どんな助けでも大変感謝しています。ここで
例ですが、私はこれはあなたの助けのために
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 </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>
おかげで一般的な考え方だと思いますが、すべてのテーブルを表示するには、テキストをクリックする方法があります25、50、またはすべてをクリックしないかぎり、表のデフォルト値は10になります。そのクリックで、表示する行の数を選択できる表の下のドロップダウンが表示され、すべての行がマークされていることを示すチェックボックス（id = "select_all"）がクリックされます。 –