复选框取消选中从列表中删除 <li> 项目答案

<div id="x"> <input type="checkbox" class="chkbox" value="Home"> Home <input type="checkbox" class="chkbox" value="Mayor Conner"> Mayor Conner </div> </br></br></br> <div class="mainPanel"> <div id="cssmenu"> </div> </div> var mainPanel = [{ title: "Home", id: "lnk_home" }, { title: "Mayor's Conner", id: "" }]; $(document).ready(function createlist() { console.log('createlist called'); var items = ''; var ulStr = "<ul>"; for (var i = 0; i < mainPanel.length; i++) { items += '<li><a href="" id="' + mainPanel[i].id + '">' + mainPanel[i].title + '</a></li>'; } ulStr += items; ulStr += '</ul>'; $("#cssmenu").append(ulStr); }); $(document).ready(function() { var $mlist = $("#menuPanel"); $(".chkbox").onchange(function() { var list = this.value; if (this.checked) { $list.append('<li>' + mlist + '</li>'); } else { $("#menuPanel li:contains('" + mlist + "')").slideUp(function() { $(this).remove(); }) } }) });

【解决方案1】：

<div id="x">
    <input type="checkbox" class="chkbox" value="Home" checked=""> Home
    <input type="checkbox" class="chkbox" value="Mayor_Conner" checked=""> Mayor Conner
</div>
<br/><br/><br/>

<div class="mainPanel">
    <div id="cssmenu">
        <ul>  </ul>
    </div>
</div>
<script>

    $(document).ready(function () {
        var arrMainPanel =
                [
                    {
                        title: "Home",
                        id: "lnk_home",
                        class: "Home"
                    },
                    {
                        title: "Mayor's Conner",
                        id: "",
                        class: "Mayor_Conner"
                    }
                ];
        arrMainPanel.forEach(function (objSinglePanel) {
            $("<li>", {
                class: objSinglePanel.class,
                html:'<a href="" id="' + objSinglePanel.id + '">' + objSinglePanel.title + '</a>'
            }).appendTo("div#cssmenu ul");
        });

        $(".chkbox").change(function () {
            $("li." + $(this).val()).show();
            if (!$(this).is(":checked"))
            {
                $("li." + $(this).val()).hide();
            }
        });
    });
</script>

【讨论】：

现在我有一个小问题，当我转到其他页面时，它没有保存设置。即使复选框未选中，列表也会显示。任何想法。
我认为我们应该在创建列表之前给出一个 if 条件。如果数组标志为真，则创建一个数组元素，否则转到下一步。并且在复选框中，标志在选中时为真，在未选中时为假。你能给我这个逻辑的语法代码吗

【解决方案2】：

这里发生了很多事情。先上代码，再解释如下：

试试这个：

var mainPanel = [{
  title: "Home",
  id: "lnk_home"
}, {
  title: "Mayor's Conner",
  id: ""
}];

function createlist() {
  //alert('createlist called');
  var items = '';
  for (var i = 0; i < mainPanel.length; i++) {
    items += '<li><a href="" id="' + mainPanel[i].id + '">' + mainPanel[i].title + '</a></li>';
  }
  $("#cssmenu ul").append(items);
}

$(document).ready(function() {

  createlist();

  $(".chkbox").on("change", function() {
    var list = $(this).val();
    if ($(this).is(":checked")) {
      $("#cssmenu ul").append('<li>' + list + '</li>');
    } else {
      $("#cssmenu ul li:contains('" + list + "')").slideUp(function() {
        $(this).remove();
      })
    }

  })
});

我做了什么：

将<ul>作为html结构的一部分（不需要放在jquery中）
修复了选择器以访问列表属性
更正了检查checkbox 是否已被检查的方式
将createlist() 函数移到$(document).ready() 之外
使用val()函数获取复选框的值
将错误的onchange() 方法更改为on("change", ...
移动了变量。 $mlist 无效。看起来你有点混淆了语法

【讨论】：

好的。现在再试一次