63918

Deselecting radio buttons while keeping the View Model in synch

I have a radio group that allows the user (using jQuery events) to deselect previous selections. I am trying to add KnockoutJS to track changes, but the viewmodal gets out of sync with the UI. Can anyone suggest how I might get the two to be in sync?

My view code:

<div id='test'>
    <input data-bind="checked: asd"  name='asd' type='radio' value="a"/>
    <input data-bind="checked: asd"  name='asd' type='radio' value="b"/>
    <input data-bind="checked: asd"  name='asd' type='radio' value="c"/>
</div>
<div>
     <p>Linked Value: <span data-bind="text: asd"></p>  
</div>


Corresponding JS:

$('#test input[type="radio"]').click(function (event) { var checked = $(this).hasClass('checked'); if (checked) { $(this).removeAttr('checked'); $(this).removeClass('checked'); } else { $(this).addClass('checked'); } }); var viewModel = { asd: ko.observable("a") }; ko.applyBindings(viewModel);

An example can be viewed here online in this fiddle.

Answer1:

I think that a simple way would be to do:

$('#test input[type="radio"]').click(function (event) { if ($(this).val() === viewModel.asd()) { viewModel.asd(null); } });

Updated Fiddle

Answer2:

You don't need to worry about the checked attribute, that's done for you. Change your event to this:

$('#test input[type="radio"]').click(function (event) { var checked = $(this).hasClass('checked'); if (checked) { $(this).removeClass('checked'); } else { $(this).addClass('checked'); } });

Fork of your fiddle here

Recommend

  • AngularJS sorting a list with nulls
  • How to remove key+value pair from an object of Array [duplicate]
  • Regexp, capture between parentheses, javascript
  • Iterate twice through a DataReader
  • How to display special characters in SQL server 2008?
  • Error in installing package: fatal error: stdlib.h: no such file or directory
  • How to make R's read_csv2() recognise the text characters properly
  • Redshift Querying: error xx000 disk full redshift
  • Undefined references when compiling gSOAP client
  • How does document.ready work with angular element directives?
  • Rails Find when some params will be blank
  • Python urlparse: small issue
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Display issues when we change from one jquery mobile page to another in firefox
  • Nant, Vault & Windows Integrated Authentication
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • JSON with duplicate key names losing information when parsed
  • How can I estimate amount of memory left with calling System.gc()?
  • Jquery - Jquery Wysiwyg return html as a string
  • Cannot Parse HTML Data Using Android / JSOUP
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Benchmarking RAM performance - UWP and C#
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Acquiring multiple attributes from .xml file in c#
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • How do I configure my settings file to work with unit tests?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Getting Messege Twice Using IMvxMessenger
  • How to stop GridView from loading again when I press back button?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • How can I remove ASP.NET Designer.cs files?
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal
  • How to load view controller without button in storyboard?