How do I use visible bindings with radio button observable parameter?

The correct radio button is selected when this page renders, but the additional inputs should appear when either "sendemail" or "sms" radio button values are selected, right?

$(function () {
    var rbViewModel = {
        qrType: ko.observable('plaintext')
    };
    ko.applyBindings(rbViewModel);
});

Then my radio buttons

<input type="radio" name="txtType" value="plaintext" data-bind="checked: qrType" />Plaintext
<input type="radio" name="txtType" value="sendemail" data-bind="checked: qrType" />Send E-mail
<input type="radio" name="txtType" value="sms" data-bind="checked: qrType" />SMS

And my inputs:

<div data-bind="visible: qrType == 'sendemail'"><input type="text" id="txtEmailSubject" placeholder="E-mail subject" /></div>
<div data-bind="visible: qrType == 'sendemail'"><input type="text" id="txtEmailBody" placeholder="E-mail body" /></div>
<d开发者_Go百科iv data-bind="visible: qrType == 'sms'"><input type="text" id="txtSmsMsg" placeholder="SMS body" /></div>

Is there something wrong with the attribute on the div elements? I thought functions were able to be used in the visible bindings per KnockoutJS documentation, like this:

data-bind="visible: qrType=='sendemail'"

When you use an observable in an expression in a data-bind attribute, you need to reference it with ().

They would need to look like: visible: qrType() === 'sendemail'