I have 2 radio buttons, When I click on the option A, a particular div has to be shown, and when click on the option B, 1st div should be hidden and 2nd div should be shown. Below is the code.
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-A" value="true" data-bind="click: test">
<label for="test-radio-Option-A">Text Message</label>
</div>
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-B" value="false">
<label for="test-radio-Option-B">Text Message</label>
</div>
<div style="display: none" data-bind="visible: showDiv">
test Div
</div>
Following is the script I tried:(coffee script)
@showPhone = ko.observable false
test: =>
@showPhone true
using this if I click on the 1st radio button, I was able to see the div, but I don't know if its the right way Can someone please guide me through this?
Thanks.
You'll be needing the two following bindings:
your html will look like this:
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-A" value="true" data-bind="checked: optionA">
<label for="test-radio-Option-A">Text Message</label>
</div>
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-B" value="false" data-bind="checked: optionB">
<label for="test-radio-Option-B">Text Message</label>
</div>
<div data-bind="visible: optionA">
test Div A
</div>
<div data-bind="visible: optionB">
test Div B
</div>
Your viewModel will need 2 boolean observables optionA and optionB for the view to bind to in this manner