Question

我在一个div中有四个复选框。

<div id="tab1" class="tab-pane">
    <input type="checkbox" id="chkbox" value="101">  This is 101
    <input type="checkbox" id="chkbox" value="102">  This is 102
    <input type="checkbox" id="chkbox" value="103">  This is 103
    <input type="checkbox" id="chkbox" value="104">  This is 104
</div>

现在每次点击，我都想在选中/取消选中复选框时，在右侧的另一个div上插入/删除<li>项。另一个div：

<div id="items">
    <ul id="itemList">
    </ul>

我正在做这样的事情：

$("#chkbox").click(function() {
            // If checked
            if ($(this).is(":checked")) {
                //add to the right
                $a = $(this).val();
                $("#itemList").append('<li>'+$a+'</li>');
            }
            else {
                //hide to the right
                $("#itemList").slideUp("fast", function () {
                        $("#itemList").child.remove();
                    });
            }
        });

这似乎不起作用：（

Answer 1

修正以下问题：

使用相同的id将多个元素更改为class
使用change事件代替click
确定哪个复选框引用您的商品。为此，我正在使用data attr。

$(".chkbox").change(function() {
    // If checked
    var value = $(this).val(),
        $list = $("#itemList");
    if (this.checked) {
        //add to the right
        $list.append("<li data-value='" + value + "'>" + value + "</li>");
    }
    else {
        //hide to the right
        $list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
            $(this).remove();
        });
    }
});

Demo

Answer 2

ID必须是唯一的，你应该使用类，而且还要注意jQuery对象没有child属性，你应该使用children方法，但是你似乎只想删除一个元素，您可以使用contains选择器。

<input type="checkbox" class="chkbox" value="101">  This is 101

$(document).ready(function() {
    var $list = $("#itemList");

    $(".chkbox").change(function() {
        var a = this.value;
        if (this.checked) {
            $list.append('<li>' + a + '</li>');
        }
        else {
            $("#itemList li:contains('"+a+"')").slideUp(function(){
               $(this).remove();
            })
        }

    })
})

http://jsfiddle.net/hhqh5/

Answer 3

未定义是正确的，您需要将id chkbox更改为class chkbox。我修改了你的javascript来提供你想要的效果。这是一个fiddle。

$(".chkbox").click(function() { 
    var a = $(this).val();  //store the value of clicked .chkbox
    // If checked           
    if ($(this).is(":checked")) {  
        //add to the right                
        $("#itemList").append('<li>'+a+'</li>'); //append li to list           
    }            
    else {                
    //hide to the right                
        $("#itemList > li").each(function(){// go through all of the li elements
            if($(this).text() == a){ //check if text is equal to a
                $(this).slideUp('fast', function(){ //slide up the li and then remove it
                    $(this).remove();
                 });
            }                   
        });             
    }        
});

Answer 4

根据我对您的问题的理解，您的意思是删除或添加相应的<li>基于某个复选框。

您必须使用一个类，以便您可以使用单一样式规则复选框（如果有的话）

<div id="tab1" class="tab-pane">
    <input type="checkbox" class="chkbox" value="101">  This is 101
    <input type="checkbox" class="chkbox" value="102">  This is 102
    <input type="checkbox" class="chkbox" value="103">  This is 103
    <input type="checkbox" class="chkbox" value="104">  This is 104
</div>
<div>
    <ul id="itemList"></ul>
</div>

这将是基于我在你的问题上理解的工作的JS

 $(".chkbox").click(function() {
            // If checked
            $a = $(this).val();
            if ($(this).is(":checked")) {
                //add to the right
                $("#itemList").append('<li id="'+$a+'">'+$a+'</li>');
            }
            else {
                //hide to the right

                        $("#" + $a).remove();

            }
        });

DEMO ：http://jsfiddle.net/laupkram/5PMkA/

根据复选框选择</li>添加或删除项目到<li>

4 个答案: