jquery基于复选框状态在div中切换文本

我仍然在学习jQuery，并遇到了一些我似乎无法解决的问题。我试图切换位于页面其他位置的div中复选框的标签。到目前为止，我已经设法追加标签只有当复选框未选中，但我不知道如何删除文本该筛选器只有，如果它变成未选中。有什么建议？jquery基于复选框状态在div中切换文本

JQUERY：

$('.filter-single').on('click', function() { 
    if ($('.filter-single input').is(':checked')) { 
     $('<li>'+$(this).text()+'/</li>').appendTo('.filters-current'); 
    } else { 
    // what goes here? 
    } 
    });

FILTER HTML：

<div class="checkbox filter-single"> 
    <input type="checkbox" value=".rain"/> 
    <label>Rain</label> 
</div>

LABEL HTML：

<div class="filter-details"> 
    <span class="filter-title">Filters:</span> 
    <ul class="filters-current"></ul> 
</div>

来源

2014-03-18 88 MPG

Demo

您可以使用:contains()来寻找相应的李再.remove()，另外我想分配click处理程序来输入本身，而不是容器是这样的：

$('.filter-single input').on('click', function() { 
    if ($(this).is(':checked')) { 
     $('<li>' + $(this).next("label").text() + ' /</li>').appendTo('.filters-current'); 
    } else { 
     $(".filters-current").find("li:contains('" + $(this).next("label").text() + " /')").remove(); 
    } 
});

来源

2014-03-18 19:04:57

正是我一直在寻找的那就没办法了！每天学些新东西：） –

喜欢的东西：

$('.filters-current').html("");

这应该将内部html设置为空字符串。

来源

2014-03-18 18:57:01 Taleeb

如果他试图用几个过滤器 – juvian

我想你正试图实施几个过滤器，如果不是Taleeb的答案应该工作。如果你确实找了几个，你可以尝试这样的事：

var filters={}; 
     $('input:checkbox').on('click', function() { 
      var filter_name = $(this).siblings("label").text(); 
      if($(this).is(":checked")){ 
       filters[filter_name]=true; 
      }else{ 
       filters[filter_name]=false; 
      } 
      displayFilters(); 
     }); 

    function displayFilters(){ 
     $(".filters-current").html(""); 
     console.log(filters) 
     for (var filter in filters){ 
      if(filters[filter]){ 
       $(".filters-current").append("<li>"+filter+"</li>") 
      } 
     } 
    }

演示：http://jsfiddle.net/juvian/X65wv/

来源

2014-03-18 19:05:19 juvian

jquery基于复选框状态在div中切换文本

回答

相关问题