jQuery根据复选框状态在div中切换文本

Question

I'm still in the process of learning jQuery and have run into something I can't seem to solve. I'm trying to toggle the label of a checkbox in a div located elsewhere on the page. So far I've managed to append the label only if the checkbox is unchecked, but I can't figure out how to remove the text for that filter only if it becomes unchecked. Any advice?

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>

Answer 1

Demo

You can use :contains() to look for the corresponding LI and then .remove() , also i would assign the click handler to the input itself instead of the container like this:

$('.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();
    }
}); 

Answer 2

Something like:

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

This should set the inner html as empty string.

Answer 3

I guess you are trying to implement several filters, if not Taleeb's answer should work. If you are indeed looking for several, you could try something like this:

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>")
            }
        }
    }

Demo: http://jsfiddle.net/juvian/X65wv/