Radio buttons as actual buttons

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.