2

1つのdivに4つのチェックボックスがあります。

<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プロパティがないため、代わりにメソッドを使用する必要がありますが、削除する要素は1つだけのようで、セレクター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

id chkboxundefinedは正しいので、に変更する必要があります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 に答える