0

アイテムのチェックを外すと、リストビューから削除されます。すべてのアイテムを削除します - 問題ありません。最初の項目でも最後の項目でもありません。

$("input[type = 'checkbox']").change(function(){
            var item=$(this);
            var elementName = $(item).attr('class');
            if(item.is(":checked")){  
             $('#myTB').append($('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('<label><input type="checkbox" name="checkbox" checked/>' + elementName + '</label>').attr('id', elementName));

            } else { 

               $('#' + elementName).remove();
               $('#myTB:visible').listview('refresh');

            }
    });

ここで私が間違っていることを理解できないようです。

HTML- 元の「チェック」の時点で

<div id="checkboxes3" data-role="fieldcontain">
  <fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
    <input id="checkbox8" name="addTo" data-theme="b" type="checkbox" class="Colgate Total Plus Whitening Toothpaste">
    <label for="checkbox8"> add to  </label>
  </fieldset>
</div>

HTML の動的に更新されるリストビュー - 複数の項目に対してチェックが行われると、リストビューにデータが取り込まれます

<div data-role="content">
    <ul id="myTB" data-role="listview" data-divider-theme="b" data-inset="true">

         /* dynamically added */
    </ul>
</div>
4

2 に答える 2

2

チェックボックスを変更し、文字列全体を使用してそのクラスを取得すると$(item).attr('class')、セレクターは次のようになります。

$('#Colgate Total Plus Whitening Toothpaste').remove();

そしてそれはうまくいきません!

これらのクラスのいずれかに一致するマークアップに ID がないため、実際に何を選択しようとしているのかわかりにくいですが、次のようなものを試してください。

$('#myTB').on('change', 'input[type="checkbox"]', function(){

    var elementName = this.className.replace(/\s+/, '_'),
        $element    = $('#' + elementName);

    if ( this.checked && $element.length === 0 ){  
         var li    = $('<li />', {'class':'ui-li ui-li-static ui-btn-up-c ui-li-last'}),
             label = $('<label />', {'for': elementName}),
             input = $('<input />', {type:'checkbox', 
                                     name:'checkbox',  
                                     text: elementName,
                                     id  : elementName
                                    }
                     ).prop('checked', true);

         $('#myTB').append(li, label, input);
    } else { 

           $element.remove();
           $('#myTB:visible').listview('refresh');
    }
});
于 2013-05-24T15:03:54.440 に答える