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 回答
1

我注意到了几件事：

  1. 就像@adeneo 说的那样，你要返回一个完整的类列表，然后将其设置为一个 ID，这是行不通的。

  2. 因为您每次都将该类列表设置为 ID，所以您正在重复使用 ID，因为每个 ID 都应该是唯一的。

  3. 您添加的复选框永远不会触发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/

于 2013-05-24T15:13:20.913 回答