Use 3 separate colors to highlight a table record when check box clicked

Question

Following code is used to highlight a table record when a checkbox is clicked. When the first checkbox clicked table record highlighted in red color, and when second checkbox is clicked table record should highlighted in yellow color and when the third checkbox is clicked table record should be highlighted in green color.Although I have used 3 colors at style none of them highlight the record when I click them

    <style>
    .cb3 {background-color:yellow;}
    .cb2 {background-color:green;}
    .cb1 {background-color:red;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    Array.prototype.remove = function() {
        var what, a = arguments, L = a.length, ax;
        while (L && this.length) {
            what = a[--L];
            while ((ax = this.indexOf(what)) !== -1) {
                this.splice(ax, 1);
            }
        }
        return this;
    };

    var checked = [];

    $(document).ready(function() {
        if (localStorage.getItem("checked") == null)
            localStorage.setItem("checked", checked);

        $("#Table input").click(function() {
            if ($(this).is(":checked")) {
                $(this).parent().parent().addClass("highlight");
                checked.push($(this).attr("id"));
            } else {
                $(this).parent().parent().removeClass("highlight");
                checked.remove($(this).attr("id"));
            }
            localStorage.setItem("checked", JSON.stringify(checked));
        });

        var saved = JSON.parse(localStorage.getItem("checked"));
        for (var i = 0;i < saved.length; i++) {
            var itemAtIndex = $("#" + saved[i] + "");
            itemAtIndex.click();
            itemAtIndex.parent().parent().addClass("highlight");
        }
    });
    </script>
    <body>
    <div class="col-lg-10">

    <table id="Table" border="1"><tr>
        <td><input type="checkbox" name="cb1" id="cb1" value="y" /></td>
        <td>Click me</td>
    </tr><tr>
        <td><input type="checkbox" name="cb2" id="cb2" value="y" /></td>
        <td>Click me</td>
    </tr><tr>
        <td><input type="checkbox" name="cb3" id="cb3" value="y" /></td>
        <td>Click me</td>
    </tr></

<table>
</div>

If all are checked should the cell show all three colours? Should one checkbox have 'seniority,' or can only one be checked at any one time? At the moment though, as Rob points out, you've not told us where (or his, or why) you're stuck, which makes this question unclear as to what you're asking. Please edit your question to include further details so that we can understand your problem. — David Thomas
Mr.Thomas I edited what I tried after <style> tag. Only one check box is allowed click at a time. — Dushee
To notify someone that's already commented on your post use the @-username syntax, such as @davidThomas. If only one checkbox is allowed to be selected then you should be using radio buttons in order to avoid confusing your users' expectations. — David Thomas

trevorp trevorp · Accepted Answer · 2017-07-27T12:59:56

Your JS was correct. In your HTML, you just need to move each id to the <tr> row and add a class to each table record.

<tr id="cb1">
  <td><input type="checkbox" name="cb1" value="y" /></td>
  <td class=label>Click me</td>
</tr>

Then use this CSS:

#cb3.highlight .label {background-color:yellow;}
#cb2.highlight .label {background-color:green;}
#cb1.highlight .label {background-color:red;}

Demo: JSFiddle

Use 3 separate colors to highlight a table record when check box clicked

1 Answers