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

Reply

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

Reply

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)
Reply

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?

Reply

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?

Reply

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

Reply
Join the discussion
Create an account Log in

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

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

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.