javascript - Select Checkbox !== Select Row Table - Stack Overflow

admin管理员组

文章数量:1410725

The select/unselect button works on the checkbox.

But it does not work for the row table.

//Select row table
$('#example').on('click', 'tr', function() {
  var $row = $(this),
    isSelected = $row.hasClass('selected')
  $row.toggleClass('selected')
    .find(':checkbox').prop('checked', !isSelected);
});

// Problem : Checkbox !== select row
$("#selectAll, #unselectAll").on("click", function() {
  var selectAll = this.id === 'selectAll';
  $("#example tr :checkbox").prop('checked', selectAll);
});

I think the checklist is just for display, for row selected and to mark it.

How when the select / unselect button is clicked,

it select on row table too, Not just on the checkbox?

You can see if you click the row table.

Code Snippet Demonstration :

$('#example').dataTable();

//Select row table
$('#example').on('click', 'tr', function() {
  var $row = $(this),
    isSelected = $row.hasClass('selected')
  $row.toggleClass('selected')
    .find(':checkbox').prop('checked', !isSelected);
});

// Problem : Checkbox !== select row
$("#selectAll, #unselectAll").on("click", function() {
  var selectAll = this.id === 'selectAll';
  $("#example tr :checkbox").prop('checked', selectAll);
});

<script src=".12.4.js"></script>
<script src=".10.16/js/jquery.dataTables.min.js"></script>
<link href=".10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>


<button type="button" id="selectAll"> Select </button>
<button type="button" id="unselectAll"> UnSelect </button>

<table id="example" class="myclass" />
<thead>
  <tr>
    <th>
    </th>
    <th>Name</th>
    <th>Company</th>
    <th>Employee Type</th>
    <th>Address</th>
    <th>Country</th>
  </tr>
</thead>
<tbody>

  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Calvin</td>
    <td>TCS</td>
    <td>IT</td>
    <td>San Francisco</td>
    <td>US</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Ananda</td>
    <td>TCS</td>
    <td>IT</td>
    <td>San Francisco</td>
    <td>US</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>John</td>
    <td>TCS</td>
    <td>IT</td>
    <td>San Francisco</td>
    <td>US</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Doe</td>
    <td>TCS</td>
    <td>IT</td>
    <td>San Francisco</td>
    <td>US</td>
  </tr>
</tbody>

The select/unselect button works on the checkbox.

But it does not work for the row table.

//Select row table
$('#example').on('click', 'tr', function() {
  var $row = $(this),
    isSelected = $row.hasClass('selected')
  $row.toggleClass('selected')
    .find(':checkbox').prop('checked', !isSelected);
});

// Problem : Checkbox !== select row
$("#selectAll, #unselectAll").on("click", function() {
  var selectAll = this.id === 'selectAll';
  $("#example tr :checkbox").prop('checked', selectAll);
});

I think the checklist is just for display, for row selected and to mark it.

How when the select / unselect button is clicked,

it select on row table too, Not just on the checkbox?

You can see if you click the row table.

Code Snippet Demonstration :

$('#example').dataTable();

//Select row table
$('#example').on('click', 'tr', function() {
  var $row = $(this),
    isSelected = $row.hasClass('selected')
  $row.toggleClass('selected')
    .find(':checkbox').prop('checked', !isSelected);
});

// Problem : Checkbox !== select row
$("#selectAll, #unselectAll").on("click", function() {
  var selectAll = this.id === 'selectAll';
  $("#example tr :checkbox").prop('checked', selectAll);
});

<script src="https://code.jquery./jquery-1.12.4.js"></script>
<script src="https://cdn.datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>


<button type="button" id="selectAll"> Select </button>
<button type="button" id="unselectAll"> UnSelect </button>

<table id="example" class="myclass" />
<thead>
  <tr>
    <th>
    </th>
    <th>Name</th>
    <th>Company</th>
    <th>Employee Type</th>
    <th>Address</th>
    <th>Country</th>
  </tr>
</thead>
<tbody>

  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Calvin</td>
    <td>TCS</td>
    <td>IT</td>
    <td>San Francisco</td>
    <td>US</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Ananda</td>
    <td>TCS</td>
    <td>IT</td>
    <td>San Francisco</td>
    <td>US</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>John</td>
    <td>TCS</td>
    <td>IT</td>
    <td>San Francisco</td>
    <td>US</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>Doe</td>
    <td>TCS</td>
    <td>IT</td>
    <td>San Francisco</td>
    <td>US</td>
  </tr>
</tbody>

JSFiddle

• javascript
• jquery
• checkbox

Share Improve this question Follow edited Nov 28, 2017 at 2:00 Calvin Ananda asked Nov 28, 2017 at 1:47 Calvin AnandaCalvin Ananda 1,53011 gold badge1616 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

One way to do it is to call .toggleClass() on the rows providing the second argument that says whether to add or remove the class:

  $("#example tr").toggleClass("selected", selectAll)
    .find(":checkbox").prop('checked', selectAll);

Added to your demo:

$('#example').dataTable();

//Select row table
$('#example').on('click', 'tr', function() {
  var $row = $(this),
    isSelected = $row.hasClass('selected')
  $row.toggleClass('selected')
    .find(':checkbox').prop('checked', !isSelected);
});

// Problem : Checkbox !== select row
$("#selectAll, #unselectAll").on("click", function() {
  var selectAll = this.id === 'selectAll';
  $("#example tr").toggleClass("selected", selectAll)
    .find(":checkbox").prop('checked', selectAll);
});

<script src="https://code.jquery./jquery-1.12.4.js"></script>
<script src="https://cdn.datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>


<button type="button" id="selectAll"> Select </button>
<button type="button" id="unselectAll"> UnSelect </button>
<table id="example" class="myclass" />
<thead>
  <tr>
    <th></th><th>Name</th><th>Company</th><th>Employee Type</th><th>Address</th><th>Country</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><input type="checkbox" /></td><td>Calvin</td><td>TCS</td><td>IT</td><td>San Francisco</td><td>US</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td><td>Ananda</td><td>TCS</td><td>IT</td><td>San Francisco</td><td>US</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td><td>John</td><td>TCS</td><td>IT</td><td>San Francisco</td><td>US</td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td><td>Doe</td><td>TCS</td><td>IT</td><td>San Francisco</td><td>US</td>
  </tr>
</tbody>

Try this code:

$('#example').dataTable();
   //Select row table
 $('#example').on('click', 'tr', function() {
   var $row = $(this);
   isSelected = $row.hasClass('selected')
   $row.toggleClass('selected').find(':checkbox').prop('checked',!isSelected);
 });

 //Checkbox !== select row
 var isSelectAll = false;
 var isUnselectAll = false;
 $("#selectAll, #unselectAll").on("click", function() {

   var selectAll = this.id === 'selectAll';
   if(selectAll){
     if(!isSelectAll){
     $('#example tr').click();
   }
     isSelectAll = true;
     isUnselectAll = false;
   }else{
     if(!isUnselectAll){
        $('#example tr').click();
    }
    isSelectAll = false;
    isUnselectAll = true;
  }


$("#example tr :checkbox").prop('checked', selectAll);

});

本文标签： javascriptSelect CheckboxSelect Row TableStack Overflow