在突出显示表记录时刷新页面时保持相同的单击复选框结果

Question

编写以下代码以完成2功能            1.单击复选框时突出显示表记录            2.在页面刷新后保持结果相同 但是使用此代码，刷新时，表记录都不会突出显示，也不会使页面保持结果相同。 我之前也发布了同样的问题，有些人建议我使用 localstorage 。我也试过了。但是我的知识太差了，以至于我无法理解完全给出的解释。我将不得不提交帮助作为我的大学作业

＆＃13;

＆＃13;

 <style>
    #cb3.highlight .label {background-color:yellow;}
        #cb2.highlight .label {background-color:green;}
        #cb1.highlight .label  {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("cb3.highlight .label ");
                checked.push($(this).attr("cb3"));
            } else {
                $(this).parent().parent().removeClass("cb3.highlight .label ");
                checked.remove($(this).attr("cb3"));
            }
            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("cb3.highlight .label ");
        }
    });
    $(document).ready(function() {
        if (localStorage.getItem("checked") == null)
            localStorage.setItem("checked", checked);
    
        $("#Table input").click(function() {
            if ($(this).is(":checked")) {
                $(this).parent().parent().addClass("cb2.highlight .label ");
                checked.push($(this).attr("cb2"));
            } else {
                $(this).parent().parent().removeClass("cb2.highlight .label ");
                checked.remove($(this).attr("cb2"));
            }
            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("cb2.highlight .label ");
        }
    });
    $(document).ready(function() {
        if (localStorage.getItem("checked") == null)
            localStorage.setItem("checked", checked);
    
        $("#Table input").click(function() {
            if ($(this).is(":checked")) {
                $(this).parent().parent().addClass("cb1.highlight .label ");
                checked.push($(this).attr("cb1"));
            } else {
                $(this).parent().parent().removeClass("cb1.highlight .label ");
                checked.remove($(this).attr("cb1"));
            }
            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("cb1.highlight .label");
        }
    });
    </script>
    <div class="col-lg-10">
    
    <table id="Table" border="1">
          <tr id="cb1">
            <td><input type="checkbox" name="cb1" value="y" /></td>
            <td class=label>Click me</td>
        </tr><tr id="cb2">
            <td><input type="checkbox" name="cb2" value="y" /></td>
            <td class=label>Click me</td>
        </tr>
        <tr id="cb3">
            <td><input type="checkbox" name="cb3" value="y" /></td>
            <td class=label>Click me</td>
        </tr>
      </table>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

很少有事情需要修复： 你重复了同样的代码三次，如果你这样做因为3个复选框，它不是必需的。您使用了一个选择器，它将选中所有三个复选框并附加事件处理程序以进行单击。

你添加了错误的类，只需要将名称类添加到＆＃39; addClass（）＆＃39;方法

$(this).attr("cb3")，错了，您想使用$(this).attr("name")。

＆＃13;

＆＃13;

<!DOCTYPE html>
<html>
<body>
 <style>
    #cb3.highlight.label {background-color:yellow;}
        #cb2.highlight.label {background-color:green;}
        #cb1.highlight.label  {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;
    };
    
    
    $(document).ready(function() {
        var checked = [];
    
        $("#Table input").click(function() {
            if ($(this).is(":checked")) {
                $(this).parent().parent().addClass("highlight label");
                checked.push($(this).attr("name"));
            } else {
                $(this).parent().parent().removeClass("highlight label ");
                checked.remove($(this).attr("name"));
            }
            localStorage.setItem("checked", JSON.stringify(checked));
        });

      if (localStorage.getItem("checked") !== null){
	var saved = JSON.parse(localStorage.getItem("checked"));
	for (var i = 0;i < saved.length; i++) {
	     $("[name='" + saved[i] + "']").trigger('click');
	}
        }
    
    });
    </script>
    <div class="col-lg-10">
    
    <table id="Table" border="1">
          <tr id="cb1">
            <td><input type="checkbox" name="cb1" value="y" /></td>
            <td class=label>Click me</td>
        </tr><tr id="cb2">
            <td><input type="checkbox" name="cb2" value="y" /></td>
            <td class=label>Click me</td>
        </tr>
        <tr id="cb3">
            <td><input type="checkbox" name="cb3" value="y" /></td>
            <td class=label>Click me</td>
        </tr>
      </table>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>


</script>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;