Knockout中checkbox绑定click冲突

使用knockout框架，在input[checkbox]上同时绑定checked和click时，checkbox点击不勾选。

应用场景：

页面有两个checkbox复选框，点击第一个，选中并修改自定义变量值为“A”，点击第二个，选中并修改自定义变量值为“B”

但在实际操作时，发现似乎有冲突。

1、直接绑定在input上：

<!--chtml--><!--/ko-->
<div>
    <input id="1" type="checkbox" 
    data-bind="checked:$root.nowValue()=='A',click:function(){$root.changeValue('A')}" />
    <label for="1">选择一</label>
</div>
<div>
    <input id="2" type="checkbox" 
    data-bind="checked:$root.nowValue()=='B',click:function(){$root.changeValue('B')}" />
    <label for="2">选择二</label>
</div>

<!--js--><!--/ko-->
self.nowValue = ko.observable();//定义变量
self.changeValue = function (v) {//点击input的事件
    console.log("点击了input："+v);
    self.nowValue(v);
}
self.nowValue.subscribe(function (val) {//监听变量变化
    console.log("当前值为："+val);
})

分别点击两个input，控制台输出结果、页面效果如下；

可以看到，虽然变量值发生变化，但是页面效果并没有展示

2、把click事件绑定到外层div上：

<!--chtml--><!--/ko-->
<div data-bind="click:function(){$root.changeValue('A')}">
    <input id="1" type="checkbox" data-bind="checked:$root.nowValue()=='A'" />
    <label for="1">选择一</label>
</div>
<div data-bind="click:function(){$root.changeValue('B')}">
    <input id="2" type="checkbox" data-bind="checked:$root.nowValue()=='B'" />
    <label for="2">选择二</label>
</div>

<!--js--><!--/ko-->
self.nowValue = ko.observable();//定义变量
self.changeValue = function (v) {//点击input的事件
    console.log("点击了input："+v);
    self.nowValue(v);
}
self.nowValue.subscribe(function (val) {//监听变量变化
    console.log("当前值为："+val);
})

结果和第一种绑定方法一样，页面都未有效果：

3、用按钮控制input的值：

<!--chtml--><!--/ko-->
<div>
    <input id="1" type="checkbox" data-bind="checked:$root.nowValue()=='A'" />
    <label for="1">选择一</label>
</div>
    <div data-bind="click:function(){$root.changeValue('B')}">
    <input id="2" type="checkbox" data-bind="checked:$root.nowValue()=='B'" />
<label for="2">选择二</label>
</div>
<div>
    <button data-bind="click:function(){$root.changeValue('A')}">选择第一个</button>
    <button data-bind="click:function(){$root.changeValue('B')}">选择第一个</button>
</div>

<!--js--><!--/ko-->
self.nowValue = ko.observable();//定义变量
self.changeValue = function (v) {//点击input的事件
    console.log("点击了input："+v);
    self.nowValue(v);
}
self.nowValue.subscribe(function (val) {//监听变量变化
    console.log("当前值为："+val);
})

结果如下，页面和控制台都能正常显示：

4、由上推测，直接在input上、或在其父元素上绑定click事件来修改input的选中状态都是有冲突的

5、下面通过添加遮罩层来【暂时】解决这个问题

<!--chtml--><!--/ko-->
<div data-bind="click:function(){$root.changeValue('A')}" class="parent">
    <input id="1" type="checkbox" data-bind="checked:$root.nowValue()=='A'" />
    <label for="1">选择一</label>
    <div class="child"></div>
</div>
<div data-bind="click:function(){$root.changeValue('B')}" class="parent">
    <input id="2" type="checkbox" data-bind="checked:$root.nowValue()=='B'" />
    <label for="2">选择二</label>
    <div class="child"></div>
</div>

<!--css--><!--/ko-->
.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    opacity: 0;
}

<!--js--><!--/ko-->
self.nowValue = ko.observable();//定义变量
self.changeValue = function (v) {//点击input的事件
    console.log("点击了input："+v);
    self.nowValue(v);
}
self.nowValue.subscribe(function (val) {//监听变量变化
    console.log("当前值为："+val);
})

结果如下，可以正常实现此效果：

---

 欢迎交流学习，有问题欢迎留言探讨。