Question

当我取消选中某个项目时，我希望将其从列表视图中删除。删除所有项目 - 不是问题。既不是第一项也不是最后一项。

$("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>

Answer 1

当您更改复选框并使用$(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');
    }
});

Answer 2

我注意到了一些事情：

就像@adeneo所说的那样，你将返回一个完整的类列表，然后将其设置为ID，这将无效。
由于您每次都将该类列表设置为ID，因此您将重新使用ID，其中每个ID都应该是唯一的。
您添加的复选框永远不会触发change()事件，因为它们在DOM准备就绪时不存在，您需要事件委派。

话虽如此，我做了一个快速演示，其中检查addTo复选框添加另一个复选框（默认状态：已选中），取消选中动态框将其删除。我希望它有所帮助。

$(document).on('change', 'input:checkbox', function(){
    var elementClass = this.className;

    if (this.checked) {
        $("#myTB").append("<li><input type='checkbox' class='appended' checked/>Dynamic Box!</li>");
    } else if (this.id != "checkbox8") {
        $(this).parent("li").remove();
    }
});

演示：http://jsfiddle.net/gNN6B/1/

从listview JQuery Mobile中删除元素

2 个答案: