Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <tr>
      <td>
        <input type="checkbox" class="px check-all1">
      </td>
      <td>
        <input type="checkbox" class="px check-all2">
      </td>
      <td>
        <input type="checkbox" class="px check-all3">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="px check1">
      </td>
      <td>
        <input type="checkbox" class="px check2">
      </td>
      <td>
        <input type="checkbox" class="px check3">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="px check1">
      </td>
      <td>
        <input type="checkbox" class="px check2">
      </td>
      <td>
        <input type="checkbox" class="px check3">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="px check1">
      </td>
      <td>
        <input type="checkbox" class="px check2">
      </td>
      <td>
        <input type="checkbox" class="px check3">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="px check1">
      </td>
      <td>
        <input type="checkbox" class="px check2">
      </td>
      <td>
        <input type="checkbox" class="px check3">
      </td>
    </tr>
  </table>
</body>
</html>
 
$('.check1').click(function () {
  var allChecked = _.every($('.check1'), {'checked': true});
  if (allChecked) {
    $('.check-all1').prop('checked', true);
  } else {
    $('.check-all1').prop('checked', false);
  }
  if (_.some($('.check1'), {checked: true}) && !(_.all($('.check1'), {checked: true}))) {
    $('.check-all1').addClass('partial-checked');
  } else {
    $('.check-all1').removeClass('partial-checked');
  }
});
​
$('.check-all1').click(function () {
  if ($('.check-all1').prop('checked') === true) {
    $('.check1').prop('checked', true);
    $(this).removeClass('partial-checked');
  } else {
    $('.check1').prop('checked', false);
  }
});
​
​
$('.check2').click(function () {
  var allChecked = _.every($('.check2'), {'checked': true});
  if (allChecked) {
    $('.check-all2').prop('checked', true);
  } else {
    $('.check-all2').prop('checked', false);
  }
  if (_.some($('.check2'), {checked: true}) && !(_.all($('.check2'), {checked: true}))) {
    $('.check-all2').addClass('partial-checked');
  } else {
    $('.check-all2').removeClass('partial-checked');
  }
});
​
$('.check-all2').click(function () {
  if ($('.check-all2').prop('checked') === true) {
    $('.check2').prop('checked', true);
    $(this).removeClass('partial-checked');
  } else {
    $('.check2').prop('checked', false);
  }
});
​
​
$('.check3').click(function () {
  var allChecked = _.every($('.check3'), {'checked': true});
  if (allChecked) {
    $('.check-all3').prop('checked', true);
  } else {
    $('.check-all3').prop('checked', false);
  }
  if (_.some($('.check3'), {checked: true}) && !(_.all($('.check3'), {checked: true}))) {
    $('.check-all3').addClass('partial-checked');
  } else {
    $('.check-all3').removeClass('partial-checked');
  }
});
​
$('.check-all3').click(function () {
  if ($('.check-all3').prop('checked') === true) {
    $('.check3').prop('checked', true);
    $(this).removeClass('partial-checked');
  } else {
    $('.check3').prop('checked', false);
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers