CODEWITHSUNDEEP
javascriptjqueryhtmlcssradio-button
t.pimentel
t.pimentel

Reputation: 1575

Change appearance of select tag to radio button

Good morning,

I have a web page in which you can rate systems.

Rate systems

I created a javascript to dynamically add new systems to be evaluated and to remove them. The problem is that I have to manually change the radio buttons names, so they don't become one giant radio button.

When adding new buttons it's easy to just change the name of the new radio-buttons from radio-button-0 to radio-button-1. But, when removing, I have to rename all items, or there will be gaps (radio-button-0 and radio-button-2 exist, but not radio-button-1).

In the other hand, selects don't have to be renamed. They will just be selected in separate and I can check their value later as an array easily.

I was wondering if there's anyway to create a select item, but change its appearance so it will look like a radio button. Or if there's any easy way to create new radio-buttons without them grouping together (It also can be a jQuery approach).

I would rather not use XForms Select1 tags.

Thank you,

Upvotes: 1

Views: 286

Answers (2)

user3886234
user3886234

Reputation:

The only things you can style about an a <select> + <option> are background-color and color.

The easiest way to accomplish what you want is probably to use some sort of a plugin. Either that, or you could possibly write some sort of script that populates X amount of radio buttons with an incrementing name to go under each tag with the class Y.

Upvotes: 2

Marcus Lind
Marcus Lind

Reputation: 11430

Why do you need to name them by number? Why cant you name them by the attribute label that you have instead if a name/label/attribute is required data.

Then there will be no gaps because you are using labels instead of numbers. Ofcourse this requires each label to be unique. But I dont see why anyone would like to add 2 labels/attributes with exactly the same name, so you could do a validation on that.

Upvotes: 0

Related Questions