Question

我想通过选中和取消选中复选框来操纵数组。我有一个数组列表，我想在取消选中复选框中从数组中删除该项目。默认情况下，必须显示列表，并且必须选中复选框。

<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();
      })
    }

  })
});

这是fiddle

Answer 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>

Answer 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无效。看起来你正在混淆语法

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

2 个答案: