在其他地方单击后按钮会更改颜色

Question

我有一个“是”和“否”按钮，我向其中添加了一些简单的CSS，即当用户单击按钮时应更改为绿色，而当用户单击否时按钮应更改为红色，但是如果我单击“是”，则单击其他位置在页面上，就像一个空白点，然后只有颜色变为绿色，我使用的是剔除JS 这是我的html：

                        <div class="controls col-md-6">
                        <div class="btn-group" data-toggle="buttons" style="background-color:inherit">
                            <label class="yes btn btn-default active-green" data-bind="click: SetAttended,css:{ active: EditView.koModel.SampledIndividualViewModel.HasAttended() === true, background-color: 'green'}  ">
                                <input class="yesno" type="radio" value="Yes" id="btnYes" /> Yes
                            </label>
                            <label class="no btn btn-default active-red active" data-bind="click: SetAttended, css:{ active: EditView.koModel.SampledIndividualViewModel.HasAttended() === false, background-color: 'red'} ">
                                <input class="yesno" type="radio" value="No" id="btnNo" /> No
                            </label>
                        </div>
                    </div>

这是我的js：

  that.SetAttended = function (data, event) {
                    if (event.target.classList.contains('yes')) {
                        data.EditView.koModel.SampledIndividualViewModel.HasAttended(true);
                    }
                    else if (event.target.classList.contains('no')) {
                        data.EditView.koModel.SampledIndividualViewModel.HasAttended(false);
                    }
                    else {
                        data.EditView.koModel.SampledIndividualViewModel.HasAttended(null);
                    }
                };