CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
Liz
Liz

Reputation: 1048

Set toggle element to 'on' or 'off' given value in HTML table with jQuery

I need to alter the way a HTML/CSS/jQuery toggle element displays - at "YES" or "NO" - depending upon the value of a cell in a table.

The functionality needed is:

  1. If the table cell has text that says "yes" the toggle element needs to have a class of .off and set the checked attribute of the checkbox at true or checked.

  2. If the cell has text that says "no" the toggle element needs to have a class of .on and set the checked attribute of the checkbox at false or unchecked.

Here is my code so far:

// 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');
        }
    });

});
th {
  text-align: left;
}

.switch-container {
  padding: 5px;
}
.switch {
    position: relative;
    display: inline-block;
    font-size: 1.6em;
    font-weight: bold;
    color: #ccc;
    height: 18px;
    padding: 6px 6px 5px 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #ececec;
    cursor: pointer;
    font-size: 14px;
}
body.IE7 .switch {
    width: 78px;
}
.switch span {
    display: inline-block;
    width: 35px;
}
.switch span.on {
    color: #5cbacc;
    margin-left: 5px;
}
.switch span.off {
    margin-left: 10px;
}
.switch .toggle {
    position: absolute;
    top: 1px;
    width: 40px;
    height: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    z-index: 999;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
}
.switch.on .toggle {
    left: 1%;
}
.switch.off .toggle {
    left: 56%;
}
<!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>

Any suggestions on how to improve my script and get this working are welcomed.

Here is a JS Bin: https://jsbin.com/derevarixo/edit?html,css,js,output

Upvotes: 0

Views: 1983

Answers (1)

Barmar
Barmar

Reputation: 781721

In the .each() loop you need to use this to access the current loop element, not $(ynCell), which contains all the yes/no cells. And to find the related .switch element, you need to use .find() from the current row.

// 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 = $(this).text().toLowerCase().trim();
        var row = $(this).closest("tr");
        // IF VALUE = NO, DISPLAY TOGGLE CLASS 'ON'
        // IF VALUE = YES, DISPLAY TOGGLE CLASS 'OFF'
        if (ynValue.indexOf('no') != -1) {
            row.find('input:checkbox').attr('checked', false);
            row.find(".switch").removeClass('off').addClass('on');
        } else if (ynValue.indexOf('yes') != -1) {
            row.find('input:checkbox').attr('checked', true);
            row.find(".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');
        }
    });

});
th {
  text-align: left;
}

.switch-container {
  padding: 5px;
}
.switch {
    position: relative;
    display: inline-block;
    font-size: 1.6em;
    font-weight: bold;
    color: #ccc;
    height: 18px;
    padding: 6px 6px 5px 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #ececec;
    cursor: pointer;
    font-size: 14px;
}
body.IE7 .switch {
    width: 78px;
}
.switch span {
    display: inline-block;
    width: 35px;
}
.switch span.on {
    color: #5cbacc;
    margin-left: 5px;
}
.switch span.off {
    margin-left: 10px;
}
.switch .toggle {
    position: absolute;
    top: 1px;
    width: 40px;
    height: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    z-index: 999;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
}
.switch.on .toggle {
    left: 1%;
}
.switch.off .toggle {
    left: 56%;
}
<!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>

Upvotes: 1

Related Questions