Checkbox 敲除Js:-使用删除按钮进行标签绑定

我使用下面的代码，这个代码运行良好

但我想需要当标签检查，标签绑定与删除按钮，也当点击删除，值取消选中

这个代码怎么可能

<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>

var viewModel={}；
viewModel.choices=[“户外”、“娱乐”、“健身房”]；
viewModel.selectedChoices=ko.observableArray（[]）；
viewModel.selectedChoicesDelimited=ko.DependentToServable（函数（）{
返回viewModel.selectedChoices（）.join（“，”）；
});
应用绑定（视图模型）；

下图显示了此代码的输出

下面的图片，我想需要。单击[x]时，请取消选中值

---

首先让我解释一下，无论何时使用

text

绑定它的功能，它实际上都会显示传递给关联DOM元素的参数的文本值。事实上，knockout使用您的参数将元素的内容设置为

文本节点

。任何嵌套元素内容都将被覆盖。我在代码中看到，在

文本绑定中有一个子DOM元素

<div id="current-selected" style="" data-bind="text: selectedChoicesDelimited">
   <!-- this content will be overwritten by value of a your parameter -->
   <a href="" id="clearAll" >Clear All</a>                     
</div>

<span data-bind="text: $data">
   <!-- this content will be overwritten by value of a your parameter -->
   <input type="button" value="Remove Task" data-bind="click: $parent.removeChoices">
</span>

<ul>
 <!-- ko foreach: selectedChoices -->
  <li>
   <div>
     <span data-bind="ifnot:$index() === 0">,</span>
     <span data-bind="text:$data"></span> 
     <span data-bind="click:$parent.removeSelectedItem" class="remove">[x] </span>
   </div>
  </li>
   <!-- /ko -->
  <li>
     <a href="" id="clearAll" data-bind="click:removeAllSelectedItem ,visible:selectedChoices().length > 1" >Clear All</a>    
  </li>
</ul>


<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"></span>
            </label>
        </li>
    </ol>
</div>

var viewModel = {};
    viewModel.choices = ["Outdoor", "Recreation", "Gym"];
    viewModel.selectedChoices = ko.observableArray([]);
    viewModel.removeSelectedItem = function(data){
         ko.utils.arrayForEach(viewModel.selectedChoices(), function (item) {
          if (item === data)return viewModel.selectedChoices.remove(item);
        });
    }
    viewModel.removeAllSelectedItem = function(data){
      viewModel.selectedChoices([]);
    }
ko.applyBindings(viewModel);