By: Bruce Bahlmann - Contributing Author (your feedback is important to us!)

In rails development, when creating web forms, you often want to allow users to select (check)/un-select (un-check) a checkbox as a very simple way to provide a Boolean (true/false) type input. However, given the many different ways to implement the checkbox, the most standard way to do this doesn't always apply. So, this is a guide to various ways you could implement the checkbox.

HTML form field: check_box (reference)

The most trivial way to implement a check_box field is within the form_for statement. Here you simply call the check_box with the method and that is it. This works reliably for most non-nested implementations.

[apps/views/survey/_form.html.erb]
<%= form_for(@survey) do |f| %>
  <div class="field">
    <%= f.label :active %><br />
    <%= f.check_box :active %>
  </div>
<% end %><% end %>

TThe implementation above yields the following HTML code within a browser. Note that Rails generates two input fields with the same name (one of type hidden and the other of type checkbox). The reason for this is that in the case the user elects NOT to check the checkbox, the normal behavior of HTML is not include any value for the field name in the returned parameters. To bypass that, the hidden field takes care of this by having a default value of zero (0) which the field name assumes upon the absence of the checkbox selected.

[apps/views/survey/_orm.html.erb]
<div class="field">
  <label for="survey_active">Active</label><br />
  <input name="survey[active]" type="hidden" value="0" />
  <input checked="checked" id="survey_active" name="survey[active]" type="checkbox" value="1" />
&</div>

HTML form field: check_box (nested)

A nested checkbox is one who's value is expressed as part of a data relationship. It is often difficult to express these relationships in the simple form previously discussed, so instead a more manual way must be used to properly handle (display and submit) passed data.

[apps/views/survey/_form.html.erb]
<table>
 <tr><td>Manditory:</td>
 <td><%= check_box("survey[question]["+key+"]", :manditory, 
         {:checked => (value["manditory"] == "1" ? true : false)}) %></td></tr>
</table>

The implementation above yields the following HTML code within a browser. You will notice that we couldn't simply express the check_box with that short form previously as these relational data types cannot be easily expressed within a form_for statement. In this particular case, the model is implemented using MongoDB and there is no active record resource but rather mongo mapper. This forces us to spell out the behavior of the checked value. Key in this implementation stands for the various questions associated with the survey.

[apps/views/survey/_form.html.erb]
<table>
  <tr><td>Manditory:</td>
  <td><input name="survey[question][1][manditory]" type="hidden" value="0" />
  <input id="survey_question_1_manditory" name="survey[question][1][manditory]" type="checkbox" value="1" />
  </td></tr>
</table>

As more implementations of checkbox are used in practice, they will be described in similar detail here.

Can Birds-Eye.Net help you or your Company? Receive your Birds-Eye.Net articles and white papers hot off the presses by adding our RSS feed to your reader.

 

(C) Copyright Birds-Eye.Net, All rights reserved.
It is against the law to reproduce this content or any portion of it in any form without the explicit written permission of Birds-Eye Network Services, LLC. Federal copyright law (17 USC 504) makes it illegal, punishable with fines up to $100,000 per violation plus attorney's fees.