ruby on rails - Use buttons as form checkboxes and associate their value with data in a textbox -

in rails 3.2 have form asks users kinds of odd jobs they're at. each category has button that, when pressed, reveals text box in user can provide self-endorsement.

i pretty set on front end unsure how move forward storing data. questions are:

1) possible make button act checkbox , save clicked buttons , corresponding text data hash key-values in single "endorsements" attribute of user model, category clicked button being key , text being value?

2) if not (1), best way store data? have considered option of creating endorsement object tied user, user has_many endorsements, each of have category attribute , body attribute.

any hints on coding form either of above extremely helpful. both of them i'm not sure how make button function checkbox (i've tried giving f.checkbox bootstrap btn btn-default class didn't work). if (2), can make part of form create objects separate what's being declared @ top of form in form_for @user code?

here current code creating buttons , fields:

  .form-group.odd     .row       .col-sm-12         = f.label :endorsements, "job categories"         click categories interest , explain why you'd @ kind of job!     .row       - category.all.each |cat|         - if cat.id == 1 || cat.id == 4 || cat.id == 7           .row         .col-sm-4           .btn.btn-default.category_button{:id => "#{cat.name}_button"}= cat.name.capitalize           = f.text_area :endorsements, rows: '2', id: "#{cat.name}_input", class: "category_input" 

the above code doesn't work because endorsements attribute doesn't exist, , know there nothing there record category buttons checked. think if endorsements attribute existed save text input text_areas (as array since there multiple text_areas??).

you can style checkboxes appear buttons. can have functionality of checkbox , feel of button. here jsfiddle found demonstrates basic idea of this.

http://jsfiddle.net/zafnd/2/

html

<div id="ck-button">    <label>       <input type="checkbox" value="1"><span>red</span>    </label> </div> 

css

div label input {    margin-right:100px; } body {     font-family:sans-serif; }  #ck-button {     margin:4px;     background-color:#efefef;     border-radius:4px;     border:1px solid #d0d0d0;     overflow:auto;     float:left; }  #ck-button label {     float:left;     width:4.0em; }  #ck-button label span {     text-align:center;     padding:3px 0px;     display:block; }  #ck-button label input {     position:absolute;     top:-20px; }  #ck-button input:checked + span {     background-color:#911;     color:#fff; }