2

我在一个 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>

现在，在每次单击时，我想在<li>选中/取消选中复选框时在右侧的另一个 div 上插入/删除一个项目。另一个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();
                    });
            }
        });

这似乎不起作用:(

4

4 回答 4

4

修复以下问题：

  • 将多个相同的元素更改id为一个class
  • 使用change事件而不是click
  • 确定哪个复选框引用您的项目。为此，我使用dataattr。


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

演示

于 2013-01-04T04:18:38.733 回答
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/

于 2013-01-04T04:06:53.657 回答
2

undefined 是正确的，您需要将您的更改id chkbox为class chkbox. 我已经修改了你的 javascript 以达到你想要的效果。这是一个小提琴。

$(".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();
                 });
            }                   
        });             
    }        
});
于 2013-01-04T04:19:15.143 回答
1

根据我对您问题的理解，您的意思是<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();

            }
        });

演示：http: //jsfiddle.net/laupkram/5PMkA/

于 2013-01-04T04:17:17.693 回答