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

【问题标题】：How do I detect which radio button has been clicked?如何检测单击了哪个单选按钮？
【发布时间】：2014-10-09 08:18:21
【问题描述】：

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

我实施此功能已经有一段时间了，而且我是 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);
    }

}

【问题讨论】：

介意发布您的模型/knockoutjs 代码吗？
当您有 JS 问题时，可以尝试使用相关的 HTML/CSS/JS 创建一个 JSFiddle 并在您的问题中发布指向它的链接。它使人们可以更轻松地查看您的代码并进行调试。

标签： jquery knockout.js

【解决方案1】：

如果没有看到您的 JavaScript，很难给您一个准确的答案，但是假设您的视图模型上有一个名为 isWebstore 的 observable，我相信以下内容应该可以帮助您。

<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 上运行的非常基本的示例。

【讨论】：

【解决方案2】：

您可以使用计算的 observable（docs here）

这与其他答案相似，但更简洁。

Javascript

this.showMessage = ko.computed(function() {
    return isWebstore() === '1';
}, this);

HTML

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

这是fiddle

【讨论】：