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://code.jquery.com/jquery-1.9.1.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
    <div class="bin-desc"></div>
<table id="MyTable" cellspacing="0">
      <thead>
        <tr>
          <th class="text-bottom">MyTable</th>
          <th><!--Column spacer --></th>
          <th><span>column 1</span></th>
          <th><span>column 2</span></th>
          <th><span>column 3</span></th>
          <th><span>column 4<br>one box</span></th>
          <th><span>column 5<br>one box</span></th>
          <th><span>column 6</span></th>
          <th><span>column 7</span></th>
          <th><span>column 8<br>required</span></th>
          <th><span>column 9<br>optional</span></th>
        </tr>
      </thead>
      <tbody>
        <tr class="single-choice-box opt-req-box">
          <td><a>email1@domain.com</a>
          </td>
            <td><!--Column spacer --></td>
          <td><input type="checkbox" name="" value="1" /></td>
          <td><input type="checkbox" checked="true" name="" value="2" /></td>
          <td><input type="checkbox" checked="true" name="" value="3" /></td>
          <td><input data-type="oneBox" class="oneBox"type="checkbox" name="" value="4" /></td>
          <td><input data-type="oneBox" class="oneBox" type="checkbox" name="" value="5" /></td>
          <td><input type="checkbox" checked="true" name="" value="6" /></td>
          <td><input type="checkbox" checked="true" name="" value="7" /></td>
          <td><input type="checkbox" data-type="required" value="8" /></td>
          <td><input type="checkbox"  data-type="optional" value="9" /></td>
        </tr>
​
        <tr>
          <td ><a>email2@domain.com </a></td>
          <td><!--Column spacer --></td>
          <td><input type="checkbox" name="" value="1" /></td>
          <td><input type="checkbox" checked="true" name="" value="2" /></td>
          <td><input type="checkbox" checked="true" name="" value="3" /></td>
          <td><input data-type="oneBox" class="oneBox"type="checkbox" name="" value="4" /></td>
          <td><input data-type="oneBox" class="oneBox" type="checkbox" name="" value="5" /></td>
          <td><input type="checkbox" checked="true" name="" value="6" /></td>
          <td><input type="checkbox" checked="true" name="" value="7" /></td>
          <td><input type="checkbox" data-type="required" value="8" /></td>
          <td><input type="checkbox"  data-type="optional" value="9" /></td>
        </tr>
​
        <tr>
          <td><a>email3@domain.com</a>
          </td>
          <td><!--Column spacer --></td>
          <td><input type="checkbox" name="" value="1" /></td>
          <td><input type="checkbox" checked="true" name="" value="2" /></td>
          <td><input type="checkbox" checked="true" name="" value="3" /></td>
          <td><input data-type="oneBox" class="oneBox"type="checkbox" name="" value="4" /></td>
          <td><input data-type="oneBox" class="oneBox" type="checkbox" name="" value="5" /></td>
          <td><input type="checkbox" checked="true" name="" value="6" /></td>
          <td><input type="checkbox" checked="true" name="" value="7" /></td>
          <td><input type="checkbox" data-type="required" value="8" /></td>
          <td><input type="checkbox"  data-type="optional" value="9" /></td>
      </tr>
​
        <tr>
          <td><a>email4@domain.com</a>
          </td>
          <td><!--Column spacer --></td>
          <td><input type="checkbox" name="" value="1" /></td>
          <td><input type="checkbox" checked="true" name="" value="2" /></td>
          <td><input type="checkbox" checked="true" name="" value="3" /></td>
          <td><input data-type="oneBox" class="oneBox"type="checkbox" name="" value="4" /></td>
          <td><input data-type="oneBox" class="oneBox" type="checkbox" name="" value="5" /></td>
          <td><input type="checkbox" checked="true" name="" value="6" /></td>
          <td><input type="checkbox" checked="true" name="" value="7" /></td>
          <td><input type="checkbox" data-type="required" value="8" /></td>
          <td><input type="checkbox"  data-type="optional" value="9" /></td>
        </tr>
​
      </tbody>
    </table>
</body>
</html>
 
div.bin-desc{
    margin: 30px;
    text-decoration: underline;
    text-align: center;
}
table thead tr th.text-bottom{
    vertical-align: bottom;
    text-align: left;
}
table thead tr th {
    text-align: center;
    vertical-align: top;
}
table thead tr td {
    vertical-align: top;
    width: 60px;
    word-wrap: break-word;
    white-space: normal;
}
table tr td:not(:first-child) {
    text-align: center;
}
table td {
    border-bottom: 1px solid #CCC;
}
table tr:first-child td {
    border-top: 1px solid green;
    vertical-align: middle;
}
table tr:last-child td {
    border-bottom: 1px solid green;
}
 
$(document).ready(function(context){
    // Check-all Checkboxes in Group
            $('input[data-action=check-all]', context).on('click', function() {
                        var $id = $(this).attr('id');
                        var _checkboxes = context.find('input[data-grp-id='+ $id + ']');
                        if ($(this).attr('checked')) {
                            _checkboxes.attr('checked', 'true');
                        } else {
                            _checkboxes.removeAttr('checked');
                        }
                    });
​
            // On checkbox click, check if check-all state needs to be altered
            $(context).on('click', 'input[data-action=check-group]', function(event) {
                var _parentCheckbox = $('input#'+ $(this).data('grp-id'), context);
                if (_parentCheckbox) {
                    var _checkboxes = $('input[data-grp-id='+ $(_parentCheckbox).attr('id')+ ']', context);
                    if (_checkboxes.not(':checked').size() == 0) {
                        _parentCheckbox.attr('checked','checked');
                    } else if (_checkboxes.not(':checked').size() <= _checkboxes.size()) {
                        _parentCheckbox.removeAttr('checked');
                    }
                }
            });
            // End Script
​
            // Optional and Required Checkboxes
​
            $("input[type='checkbox'][data-type='optional']").on('change', function() {
                var $this = $(this);
                var $row = $this.closest('.opt-req-box');
​
                if ($this.is(':checked')) {
                    $row.find("input[type='checkbox'][data-type='required']").prop('checked', true);
                }
​
            });
​
            $("input[type='checkbox'][data-type='required']").on('change', function() {
                var $this = $(this);
                var $row = $this.closest('.opt-req-box');
​
                if ($row.find("input[type='checkbox'][data-type='optional']").is(':checked')
                        && !$this.is(':checked')) {
                    $row.find("input[type='checkbox'][data-type ='optional']").prop('checked', false);
                }
            });
​
            // End Script
​
            // Select Only One Two Checkboxes
​
            $(".oneBox").on('change', function() {
                var $this = $(this);
                var $row = $this.closest('.single-choice-box');
                var checkedAlready = $this.prop('checked');
​
                $row.find('.oneBox').each(function(i, e) {
                    var $checkbox = $(e);
                    $checkbox.prop('checked', false);
                });
                if (!checkedAlready && !$this.prop('checked')) {
                    $this.prop('checked', true);
                }
​
            });
            // End Script
});
Output

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

Dismiss x
public
Bin info
HybridEyeGrillagepro
0viewers