In a recent project that included a multi-device friendly web form, I came across a common issue when using the buttonset function on jQuery UI – the inability to deselect a button from a jQuery UI buttonset once selected. Although there are some solutions out there that aim to resolve this issue, I found that the ones I tried out didn’t perform all functions I wanted, which were:

  • Deselect a selected radio button if it is clicked
  • Deselect a selected radio button if another radio button in the group is clicked

The below code addresses both these issues by performing the selection and also updating the radio buttons to reflect the selected/deselected state of the underlying radio control.

HTML

JavaScript