如何更改knockoutjs中的onClick按钮答案

【问题标题】：How to change onClick button in knockoutjs如何更改knockoutjs中的onClick按钮
【发布时间】：2021-12-02 04:01:19
【问题描述】：

我有一个带有一些 css 的 html：

<label class="label-checkbox">
    <input type="checkbox" data-bind="click: clickedMultipleServicesButton, checked: checkedMultipleServicesButton, css: {checked: true}">

    <span style="font-size:14px !important">Test Button</span>
</label>
<style>
    label.label-checkbox {
        cursor: pointer;
    }

    label.label-checkbox input {
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        pointer-events: none;
    }

    label.label-checkbox span {
        padding: 8px 11px;
        border: 1px solid #ccc;
        display: inline-block;
        color: #ffffff;
        border-radius: 6px;
        margin: 7px;
        background: #253965;
        user-select: none;
    }

    label.label-checkbox input:checked + span {
        box-shadow: inset 1px 2px 5px #777;
        transform: translateY(1px);
        background: #ffd800;
    }
</style>

当我删除数据绑定时它可以工作。单击它会将蓝色按钮着色为黄色，并且相反。

但是，当我添加数据绑定时：click 它不再起作用。我假设我需要在点击事件上动态附加 css 类？

期望的行为：我想要data-bind="click: someFunction"，但是当我点击时，有css行为，并且有功能可以捕捉按钮何时被选中，何时未被选中。

【问题讨论】：

标签： javascript html css knockout.js

【解决方案1】：

是的，我不确定如何在淘汰赛中操作伪类，但您可以动态添加和删除 CSS 类：

<label class="label-checkbox" >
        <input type="checkbox" data-bind="click: clickedMultipleServicesButton, css: checkedMultipleServicesButton() && 'checked'"/>

        <span style="font-size:14px !important">Test Button</span>
    </label>
    <style>
        label.label-checkbox {
            cursor: pointer;
        }

            label.label-checkbox input {
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                pointer-events: none;
            }

            label.label-checkbox span {
                padding: 8px 11px;
                border: 1px solid #ccc;
                display: inline-block;
                color: #ffffff;
                border-radius: 6px;
                margin: 7px;
                background: #253965;
                user-select: none;
            }

            label.label-checkbox input.checked + span {
                box-shadow: inset 1px 2px 5px #777;
                transform: translateY(1px);
                background: #ffd800;
            }
    </style>

请注意，我将您的 input:checked 变成了 input.checked。

视图模型中的代码：

self.checkedMultipleServicesButton = ko.observable(false);
self.clickedMultipleServicesButton = function (e) {      
  self.checkedMultipleServicesButton(!self.checkedMultipleServicesButton());
}

【讨论】：