Объединение двух конфликтующих сценариев JQuery флажок

Question

Я пытаюсь использовать два скрипта jQuery, которые кажутся конфликтующими друг с другом. Один не будет работать, а другой включен. Я довольно новичок в jQuery, поэтому я нашел эти сценарии в сети и хочу использовать их одновременно.

Первый сценарий превращает кнопку в флажок, а второй сценарий динамически добавляет значение флажка ксписок при выборе (и удаляет при снятии).

Буду очень признателен, если кто-нибудь сможет объяснить, где я ошибаюсь и как заставить работать оба сценария.

Также в другой заметке для разработки второго сценария можно ли добавить «X» в конец каждой записи списка, чтобы пользователь мог щелкнуть по нему, чтобы удалить значение из списка, а также отменить выборфлажок?

Любая помощь очень ценится!

http://jsfiddle.net/73zounsc/

HTML:

<form class="container" action="#" method="post">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-8">
<h3>Most Popular</h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div data-toggle="buttons">
<label class="btn btn-block btn-outline-dark">
<input type="checkbox" class="hidden" name="x" id="x" value="x" autocomplete="off">x
</label>
<label class="btn btn-block btn-outline-dark">
<input type="checkbox" class="hidden" name="y" id="y" value="y" autocomplete="off">y
</label>
</div>
</div>
<div class="col-md-6">
<div data-toggle="buttons">
<label class="btn btn-block btn-outline-dark">
<input type="checkbox" class="hidden" name="z" id="z" value="z" autocomplete="off">z
</label>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm">
<div class="card-body">
<h3 class="card-title">Itinerary</h3>
<!-- JQUERY ACTIONS HERE -->
<div id="list">
<ul>

</ul>
<!-- JQUERY ACTIONS HERE -->
</div>
</div>
</div>
</div>
</div>
</form>

CSS:

.hidden {
    display: none;
}

JQuery:

 $(document).ready(function(){

    $('[data-toggle="buttons"] .btn').on('click', function () {
        //toggle style
        $(this).toggleClass('active');

        // toggle checkbox
        var $chk = $(this).find('[type=checkbox]');
        $chk.prop('checked',!$chk.prop('checked'));

        return false;
    });

    $('input:checkbox').change(
    function(){
        if ($(this).is(':checked')) {
            $('<li />').appendTo('#list ul').text($(this).val());
        }
        else {
            $('#list li:contains('+$(this).val()+')').remove();
        }
    });
});

Answer 1

Самый простой способ должен состоять в том, чтобы объединить две функции в одну:

$(document).ready(function(){
    $('[data-toggle="buttons"] .btn').on('click', function () {
        //toggle style
        $(this).toggleClass('active');

        // toggle checkbox
        var $chk = $(this).find('[type=checkbox]');
        $chk.prop('checked',!$chk.prop('checked'));

        if ($chk.is(':checked')) {
            $('<li />').appendTo('#list ul').text($chk.val());
        }
        else {
            $('#list li:contains('+$chk.val()+')').remove();
        }

        return false;
    });
});

Что касается добавления кнопки удаления, вам нужно добавить еще один HTML-элемент с функцией удаления к событию click:

$(document).ready(function(){
    $('[data-toggle="buttons"] .btn').on('click', function () {
        //toggle style
        $(this).toggleClass('active');

        // toggle checkbox
        var $chk = $(this).find('[type=checkbox]');
        $chk.prop('checked',!$chk.prop('checked'));

        if ($chk.is(':checked')) {
            var li = $('<li></li>').text($chk.val());

            //Create removal button
            li.append($('<a href="javascript:void(0);" onclick="RemoveLI(\''+$chk.val()+'\')">X</i>'))

            li.appendTo('#list ul');
        }
        else {
            $('#list li:contains('+$chk.val()+')').remove();
        }

        return false;
    });
});


function RemoveLI(val) {
    $('#list li:contains('+val+')').remove();

    //Remove check & active class
    var $chk = $.find('[type=checkbox][value="'+val+'"]');
    $chk = $($chk[0]);
    $chk.prop('checked',!$chk.prop('checked'));

    $chk.parent().toggleClass('active')
}

jsFiddle