Question

我的'listmaker'包含一个文本框＆amp;两个按钮。您在文本框中键入项目，点击“添加项目”，项目将被推送到一个数组。完成后，点击完成，然后在div中填入项目列表。每个列表项也有一个复选框。我想删除任何带有选中复选框的列表项，最好通过单击另一个按钮来“删除选中的项目”，但不是必需的。

这是html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
        <script src='script.js'></script>
        <title>Listmaker</title>
    </head>
    <body>
    <form>
        <input type="text" id="add" />
        <button type="button" name="addItem" id="addItem">Add Item</button>
        <button type="button" name="finish" id="finish">Finish</button> 
        </form>
        <div>
            <ol id="list">
            </ol>
            <button type="button" name="lineThrough" id="lineThrough">Remove Checked Items</button>
        </div>
    </body>
</html>

和jQuery：

$(document).ready(function() {
        var list = [];
        $('#add').focus();

    $('#addItem').click(function() {
        list.push($('#add').val());
        $('#add').val('');
        $('#add').focus();
    });

    $('#finish').click(function() {
        for(i=0; i<list.length; i++) {
        $('#list').append('<li><input type="checkbox" class="unchecked"/>' +list[i]+ '</li>');
        }
    });

});

在过去的几个小时里，我尝试了很多不同的方式，我甚至不认为我是在正确的轨道上，所以我没有在上面的代码中包含我的尝试。我不能围绕如何迭代复选框和array.remove（）数组项目，它是它的一部分。任何帮助将不胜感激。

Answer 1

请参阅http://jsfiddle.net/WGKHG/1/

$(document).ready(function() {
        var list = [];
        $('#add').focus();

    $('#addItem').click(function() {
        list.push($('#add').val());
        $('#add').val('');
        $('#add').focus();
    });

    $('#finish').click(function() {
        var ids=Array();
        $('#list li').each(function(){
            if($(this).find("input:checked").length>0)
            {

                ids.push( 1 * $(this).attr("id").split("_")[1]);
                //alert("checked "+ids);
            }
        });

        for(var i=ids.length;i>0;i--)
        {
           //alert("checked "+ids);
           list.splice(ids[i-1],1);
        }

        $('#list').html("");

        for(i=0; i<list.length; i++) {

        $('#list').append('<li id="li_'+i+'" ><input type="checkbox" class="unchecked"/>' +list[i]+ '</li>');
        }
    });

});

Answer 2

DEMO：http://jsfiddle.net/GKnHG/1/

我们可以使用.splice()方法。

$('li').each(function() {
  if($(this).find('input:checked').length) {
     var val = $(this).find("span").html();
     var index = $.inArray(val, list);
     if (index >= 0) {
        list.splice(index, 1);
     }
  }
});
buildList();

我将列表构建移动到另一个函数（buildList()），当我们在单击完成按钮时调用它，并在上面的块结束时调用它。

基本上，我们循环each()的{{1}}，然后检查li他们内部有if :checked（长度为如果没有，请input。

一旦我们知道我们已经选中了0复选框，我们就可以使用li从.html()元素中获取字符串，并执行{{1 check，返回数组中值的索引，如果找不到，则返回span。

jQuery.inArray()它大于或等于零，我们使用-1方法删除该索引处的数组项。第二个参数是要删除的项目数。

Answer 3

http://jsfiddle.net/MpBZp/1/

我稍微更改了应用程序，摆脱了完成按钮并列出了var。当你输入一个项目时，让你点击输入.BETWEEN，JQuery已经老了！

Answer 4

可以尝试将更改事件绑定到选中时从数组中删除项目的复选框。例如：

$("#list").on( "change", "input.checkbox", function() {
    var $this = $(this);
    if ( $this.is(":checked") ) {
        removeFromArray( $this.val(), list );
    }
});

function removeFromArray( value, list ) {
    var index;
    if ( list == null ) {
        return;
    }
    index = list.indexOf(value);
    // Handle edge case so we dont do a range of 0 to -1
    if ( index !== -1 ) {
        list.splice(index, 1);
    }
}

尚未完全检查此代码，但它应该关闭。

Answer 5

使用该ID从列表中删除值，将一些id添加到列表中。 this可能会对您有所帮助。

Answer 6

在这里，我为上述问题做了完整的解决方案。

DEMO： http://codebins.com/bin/4ldqp9n

<强> HTML：

<div id="panel">
  <input type="text" id="add" />
  <button name="addItem" id="addItem">
    Add Item
  </button>
  <div>
    <ol id="list">
    </ol>
    <button type="button" name="lineThrough" id="lineThrough">
      Remove Checked Items
    </button>
  </div>
</div>

<强> CSS：

input#add{
  border:1px solid #55669a;
}
button{
  border:1px solid #55669a;
}
button:hover{
  background:#acacac;
}
ol{
  padding:2px;
  border:1px solid #7788a9;
  background:#a2a5fd;
  display:none;
}
ol li{
  list-style:none;
}

<强> JQuery的：

$(function() {
    $("#add").focus();
    var list = new Array();
    //Add New Item 
    $("#addItem").click(function() {
        if ($.trim($("#add").val()) != "") {
            list.push($.trim($("#add").val()));
            $("#list").append("<li><input type='checkbox' value='" + (list[list.length - 1]) + "'/>" + list[list.length - 1] + "</li>");
            $("#add").val('');
            if (list.length > 0) {
                $("#list").show(800);
            }

        }

    });
    //Remove Checked Item
    $("#lineThrough").click(function() {
        $("#list input:checked").each(function() {
            var index = $.trim($("#list input:checkbox").index(this));
            list.splice(index, 1);
            $("#list li:eq(" + index + ")").remove();
            if (list.length <= 0) {
                $("#list").hide('fast');
            }
        });
    });
});

DEMO： http://codebins.com/bin/4ldqp9n

jQuery - 需要从数组中删除项目

6 个答案: