如何检测单击了哪个单选按钮？

debugcn 发表于 Dev

史蒂文

我Knockout JS用来在两个单选按钮之间切换。这可行，现在我试图弄清楚如何在单击时切换CSS类，yes/no以便显示/隐藏消息框。

在此处输入图片说明

自实施此功能以来已经有一段时间了，我还是Knockout的新手。所以我有两个问题。

我看到我正在data-toggle="buttons-radio"使用Knockout绑定按钮。但是我在我的js中找不到任何代码来切换“活动/不活动”类。我应该在我的JS中找到任何东西吗？
我知道我可以添加data-bind="click: myFunction"每个无线电输入。但是，由于我正在使用data-toggle，所以我想知道是否可以使用它。如果是这样，这是更“正确”的方法吗，我该怎么做？

 <label for="Store_is_web_store">Is this a web store?</label>
 <div class="button-group binary" data-toggle="buttons-radio">
     <span class="radio-wrapper">
         <input type="radio" class="active" name="is_web_store" value="1" />
         <span class="background">Yes</span>
     </span>

     <span class="radio-wrapper">
         <input type="radio" class="inactive" name="is_web_store" value="0" checked="checked" />
         <span class="background">No</span>
     </span>
 </div>

 <div class="slide-in-out-container">
     <div class="message-box">
         <div class="message-text">
             Msg here
         </div>
     </div>
 </div>

这是我用于此页面的唯一JS代码：

function registerStoreModel(){
    var self = this;
    self.brands = ko.observableArray();
    self.brand_name = ko.observable();
    self.brand_id = ko.observable();

    // Add brand
    self.addBrand = function() {

        if (self.brand_name() != "") {
            // Add brand to GUI list
            self.brands.push(new brand(self.brand_id(), self.brand_name()));
            self.brand_name("");
        }
    }.bind(self);

    // Remove brand
    self.removeBrand = function(brand) {
        self.brands.remove(brand);
    }

}

万维网

没有看到您的JavaScript很难给您一个确切的答案，但是假设您在名为isWebstore的视图模型中有一个可观察的对象，我相信以下内容将为您提供帮助。

<div class="button-group binary" data-toggle="buttons-radio">
    <span class="radio-wrapper">
        <input type="radio" class="active" name="is_web_store" value="1" data-bind="checked: isWebstore" />
        <span class="background">Yes</span>
    </span>
    <span class="radio-wrapper">
        <input type="radio" class="inactive" name="is_web_store" value="0" data-bind="checked: isWebstore" />
        <span class="background">No</span>
    </span>
</div>

<div data-bind="visible: isWebstore() === '1'" class="slide-in-out-container">
    <div class="message-box">
        <div class="message-text">
            Msg here
        </div>
    </div>
</div>

这是在jsfiddle上工作的非常基本的示例。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。