Radio Button Check Mark Icon


#1

Hello, any way to change the default radio button icon to a Check Mark? Thanks


#2

Which Radio Button control are you using? (ie. Which framework?)


#3

I’m using jQuery framework


#4

Not easily. The Radio Button indicator is part of an underlying HTML Input element, which is what handles the drawing. It’s not under our control.

Using a Checkbox instead of the usual indicator could be confusing to users. They expect checkboxes to work in certain ways: it would be unexpected for it to look like a Checkbox control and act like a RadioButton.


#5

The idea is to have a list of options and you select just one, checkbox allow you to select more than one unless you control onclick to unmark all others


#6

Like this


#7

Maybe approach the problem from a different angle. Rather than modifying the Radio Button control, consider using the CheckBox control and prevent the user from having more than one item selected. The following code works in the jQM CheckBox sample project:

Function CheckBox1_onchange(e)
  Dim i,numItems, itemSelected
  numItems = $("#CheckBox1 .ui-checkbox").length
  itemSelected = Number(e.target.id.split("_")[1])
  
  For i = 1 To numItems
    If i <> itemSelected Then CheckBox1.setValue(i, False)
  Next i
End Function

#8

Where did you get this code? I’m having problems to get this code working


#9

Did you try replacing the entire CheckBox1_onchange() function in the jQM CheckBox sample project with this code instead? Then you can see it working and maybe get an idea of how something similar might work for you. It’s just code I wrote.


#10

What is the e inside the parenthesis? The error is there

Obter o Outlook para Androidhttps://aka.ms/ghei36


#11

The ‘e’ is shorthand for the event object. See this Stack Overflow answer for a more complete explanation.

I’ve attached a modified working copy of the jQM CheckBox sample project using AppStudio v.6. Feel free to run it and see how my suggested code above works. If you’re still seeing an error, something else is going on.

CheckBox.nsx (20.6 KB)


#12

It worked tks, any way to hide the square letting just the Check Mark?


#13

Not really, at least not without considerable effort. The checkmark itself is a background image and the square is an ::after pseudo element so is not part of the DOM. Sorry.