组合两个冲突的jQuery脚本

我试图使用两个似乎相互冲突的jQuery脚本。一个不起作用，而另一个包括在内。我对jQuery相当陌生，所以我在网上找到了这些脚本，希望同时使用它们

第一个脚本将按钮变成复选框，第二个脚本在选中时将复选框值动态添加到列表中，在取消选中时将其删除

如果有人能解释我哪里出了问题，以及如何让两个脚本都工作，我将不胜感激

另外，在开发第二个脚本时，是否可以在每个列表条目的末尾添加一个X，以便用户可以单击此按钮从列表中删除值并取消选中复选框

非常感谢您的帮助

HTML:

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

---

最简单的方法应该是将两个功能合并为一个：

$(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元素：

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

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

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