从jquery中的逗号分隔字符串中获取第一个值

Question

我正在尝试创建一个像这样的过滤器选项：

enter image description here

我可以从逗号分隔的字符串中获取值，但不是如下所示： enter image description here

每次单击左侧的复选框，我都会获得该复选框的值并将其显示在右上角。 如果我选择Option1，它会显示Option1，然后如果我选择Option2，它会显示Option1，Option1，Option2。我希望在开头删除Option1。

以下是我的代码：

 
$('input[type="checkbox"]').change(function()
		{ 

			if(!$(this).is(':checked'))
			   $('.badge li').remove();

			var favorite = [];
            
            $.each($("input[name='category']:checked"), function(){            
                favorite.push($(this).val());
            });
            
            var selecte = favorite.join(",")[0];


            $(".badge").append($("<li>").css({float:'left'}).html(selecte));

			var itemName = $('select option:selected').text(); 

	        $('.uncheckall').show();

			$('.smallapply').show();

			var textinputs = document.querySelectorAll('input[type=checkbox]');

			var empty = [].filter.call( textinputs, function( el )
			{
			   return !el.checked
			});

			if (textinputs.length == empty.length)
			{			    
			    $('.uncheckall').hide();

				$('.smallapply').hide();
			}

		});     

<ul class="list-unstyled scrollbar" id="style-3">

		 <li>
		  <label class="custom-control custom-checkbox">
		  <input type="checkbox" name="category" id="checkbox1" value="option1" class="custom-control-input">
		  <small class="custom-control-indicator"></small>
		  <small class="custom-control-description">Option1</small>
		  </label>
		</li>

		<li>
		 <label class="custom-control custom-checkbox">
		 <input type="checkbox" name="category" id="checkbox2" value="option2" class="custom-control-input">
		 <small class="custom-control-indicator"></small>
		 <small class="custom-control-description">Option2</small>
		</label>
	   </li>

	   <li>
		<label class="custom-control custom-checkbox">
		<input type="checkbox" name="category" id="checkbox3" value="option3" class="custom-control-input">
		<small class="custom-control-indicator"></small>
		<small class="custom-control-description">Option3</small>
		</label>
	   </li>
     </ul>

Answer 1

我找到了它：

$('input[type="checkbox"]').change(function()
{
    var value;

    if (this.checked) {
        value = $(this).val();
        $('.inline').append($('<li>', { text: value }));
        $('#select_all').show();
        $('.clearall').show();
    } else {
        $('.inline li').last().remove();
    }

    $(".inline").delegate("li", "click", function(){
        var checkboxElement=("input[name='category'][value='"+$(this).text()+"']");
        $(''+checkboxElement+'').prop('checked', false);
        $(this).remove();
        $(".inline").removeAttr('checked');
    });

    $(".inline").delegate("li", "click", function(){
        var allchecked = $('input[id^=checkbox]:checked').length;
        if (!allchecked)
        {
            $('.clearall').hide();
        };
    });

    var allchecked = $('input[id^=checkbox]:checked').length;
    if (!allchecked)
    {
        $('.clearall').hide();
    };

    $(".clearall").click(function(){

        $(".custom-control-input").prop('checked', false);
        $('.inline li').remove();
        $('.clearall').hide();
    });

    var itemName = $('select option:selected').text();

    $('.uncheckall').show();

    $('.smallapply').show();

    var textinputs = document.querySelectorAll('input[type=checkbox]');
    var empty = [].filter.call( textinputs, function( el )
    {
        return !el.checked
    });

    if (textinputs.length == empty.length)
    {
        $('.uncheckall').hide();

        $('.smallapply').hide();
    }

});