All threads / Radio buttons as actual buttons

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Radio buttons as actual buttons

Charlie Gaines asked in CSS

Hey all,

I am trying to convert a form with radio buttons such that the radio buttons are just plain buttons. When selected they should have an active class and register the selected choice. I've looked around a bunch for a solution...and have tried several things myself with no luck. Has anyone tackled this problem?

Thanks,

Charlie

I think you'll need to use Javascript to pull it off. If you use Bootstrap it comes with support for that kind of functionality. http://getbootstrap.com/javascript/#buttons-checkbox-radio

You might also be able to do it with pure CSS but it looks like you need to use JS for IE8 support: http://stackoverflow.com/questions/5523735/how-to-make-a-radio-button-look-like-a-toggle-button

Yea that's how I ended up doing it - with Bootstrap buttons and JS and a hidden input. How could I improve this?

$('button.assessment-button').click (e)->
    e.preventDefault()
    val = $(this).attr('value')
    $(this).parent().siblings().find('input').val(val)

The Bootstrap code should actually check the radio buttons for you. You don't need to use a hidden field because with radio buttons, you set the same name for the different inputs and the browser submits only the value of the checked one. Does that make sense?

Thanks Chris...I figured it out in the end using the native Bstrap functionality. But for another framework you might need to use an approach like the one I pasted in above, no?

Yes definitely would if you're using something that doesn't have it built-in.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 35,699+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.