Knockout Js:- Label bind with delete button

I use below code, this code is working fine.

But i want to need when label check, label bind with delete button and also when click on delete, value uncheck.

How it's possible for this code?

<div id="current-selected" style="" data-bind="text: selectedChoicesDelimited">
    <a href="" id="clearAll" >Clear All</a>                     
</div>
<div data-role="content" class="filter-options-content" role="tabpanel" aria-hidden="false">
    <ol class="items mcs-items" data-bind="foreach: choices">
        <li>
            <label>
                <input id="5" class="multifilter" value="attribute?activity?5" type="checkbox" data-bind="attr: { value: $data }, checked: $parent.selectedChoices" ><span data-bind="text: $data"><input type="button" value="Remove Task" data-bind="click: $parent.removeChoices"></span>
            </label>
        </li>
    </ol>
</div>

<script type="text/javascript">
    var viewModel = {};

    viewModel.choices = ["Outdoor", "Recreation", "Gym"];
    viewModel.selectedChoices = ko.observableArray([]);

    viewModel.selectedChoicesDelimited = ko.dependentObservable(function () {
        return viewModel.selectedChoices().join(",");
    });

    ko.applyBindings(viewModel);

</script>

Below in image, output for this code.

enter image description here

Below image, i want to need. When click on [x], value uncheck.

enter image description here