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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>Yes/No</th>
    <th>Toggle</th> 
  </tr>
  <tr>
    <td class="yn">Yes</td>
    <td class="switch-container">
      <input type="checkbox" checked>
      <div class="switch"><div class="toggle"></div>
      <span class="on">YES</span><span class="off">NO</span></div></td>
  </tr>
  <tr>
    <td class="yn">No</td>
    <td class="switch-container">
      <input type="checkbox" checked>
      <div class="switch"><div class="toggle"></div>
      <span class="on">YES</span><span class="off">NO</span></div></td>
  </tr>
</table>
  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</body>
</html>
 
// TRIM FUNCTION
if (typeof String.prototype.trim !== 'function') {
    String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, '');
    }
}
​
// TOGGLE FUNCTIONALITY
$(document).ready(function() {
​
    // FIND DEV YES/NO INPUT & CHECK VALUE
    var ynCell = $("td.yn");
    $(ynCell).each(function() {
        var ynValue = $(ynCell).text().toLowerCase().trim();
        // IF VALUE = NO, DISPLAY TOGGLE CLASS 'ON'
        // IF VALUE = YES, DISPLAY TOGGLE CLASS 'OFF'
        if (ynValue.indexOf('no') != -1) {
            $(".switch").parent().find('input:checkbox').attr('checked', false);
            $(".switch").removeClass('off').addClass('on');
        } else if (ynValue.indexOf('yes') != -1) {
            $(".switch").parent().find('input:checkbox').attr('checked', true);
            $(".switch").removeClass('on').addClass('off');
        }
    });
​
    $(".switch").each(function() {
        if ($(this).parent().find('input:checkbox').length) {
            if (!$(this).parent().find('input:checkbox').hasClass("show")) {
                $(this).parent().find('input:checkbox').hide();
            }
            if ($(this).parent().find('input:checkbox').is(':checked')) {
                $(this).removeClass('on').addClass('off');
            } else {
                $(this).removeClass('off').addClass('on');
            }
        }
    });
​
    $(".switch").click(function() {
        if ($(this).hasClass('on')) {
            $(this).parent().find('input:checkbox').attr('checked', true);
            $(this).removeClass('on').addClass('off');
        } else {
            $(this).parent().find('input:checkbox').attr('checked', false);
            $(this).removeClass('off').addClass('on');
        }
    });
​
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers