Change Views Exposed Filter Form Select Element To A List Of Checkboxes

12th May 2010

Whilst creating a view for a Drupal site the other day I created an exposed form but rather than the usual select boxes that get displayed I needed them to be a list of check boxes. Whilst searching about on Google I eventually found this article, which kindly provides a function that will do this. Here is the function in full.

  1. /**
  2.  * hack to make exposed dropdowns appear as checkboxes
  3.  * (can't do it w/ form_alter b/c whole structure is different)
  4.  * just render the options directly as checkboxes, pass the values the same as the SELECT,
  5.  * tricks the form api and views to think it's a dropdown
  6.  * [registered w/ hook_theme, toggled w/ #theme in form_alter]
  7.  */
  8. function theme_select_as_checkboxes($element) {
  9. $output = '';
  10.  
  11. $selected_options = (array) $element['#post'][$element['#name']]; // the selected keys from #options
  12.  
  13. foreach($element['#options'] as $key => $value) {
  14.  
  15. $id = $element['#id'] . '-' . $key; // custom
  16.  
  17. // is this option selected?
  18. $selected = (array_search($key, $selected_options) !== false); // (returns key or false)
  19.  
  20. $checkbox = '';
  21.  
  22. $output .= '' . $checkbox .' '. $value .'' . "\n";
  23. }
  24. return theme_form_element($element, $output); // wraps it neatly
  25. }

The only problem was that the author didn't also include the rest of the functions needed to integrate this function into the site. As a result there are a lot of comments asking how to do this. After a bit of tinkering I managed to get this function working so I thought I would put the solution here in case it is of use to anyone. Before you start it is important to note that all of these functions must sit in a module. They currently won't be picked up by Drupal if you put them in your template.php file.

The first thing we need to do (after the view has been created) is create a theme hook so that we can let Drupal know about the theme_select_as_checkboxes() function so that it can use it in a theme() call.

  1. /**
  2.  * Implementation of HOOK_theme.
  3.  *
  4.  * @return array An array of theme hooks.
  5.  */
  6. function mymodule_hooks_theme() {
  7. return array(
  8. 'select_as_checkboxes' => array(
  9. 'function' => 'theme_select_as_checkboxes'
  10. ),
  11. );
  12. }

The final step is to include a hook_form_alter() function with a name in the form of:

_form__alter()

The exposed form name is views_exposed_form, so in a module called "mymodule" the function would be called modulename_form_views_exposed_form_alter(). All this function does is to alter the form so that the any elements we need to change to checkboxes are given the correct theme.

  1. /**
  2.  * Implementation of HOOK_form_alter().
  3.  *
  4.  * @param array $form The form
  5.  * @param string $form_state The current state of the form.
  6.  */
  7. function mymodule_hooks_form_views_exposed_form_alter(&$form, &$form_state)
  8. {
  9. // We only want to change a certain form, so stop Drupal looking at any
  10. // other exposed view form
  11. if ($form['#id'] == 'views-exposed-form-myview-page-1') {
  12. // Make the select box appear as a list of checkboxes
  13. $form['formelement']['#theme'] = 'select_as_checkboxes';
  14. $form['anotherformelement']['#theme'] = 'select_as_checkboxes';
  15. }
  16. }

Once everything is in place you should see your select element being printed out as a list of checkboxes. Everything about the form will work in exactly the same way, the display layer is all that has been changed.

An alternate solution to this is to use the Better Select module. This module will change all multi-select form elements into a list of checkboxes anywhere that they are found in Drupal. Better Select is an easier solution to implement, but might not be what you want to do.

Comments

Permalink
Hello there, I noticed you are using Drupal on your website and was wondering why you don't use WordPress instead?

Bailey (Tue, 08/24/2010 - 09:12)

Permalink
Awesome !

nourcy (Thu, 09/30/2010 - 16:08)

Permalink
Because it's prescriptive and limited?

pbarnett (Thu, 09/30/2010 - 23:37)

Permalink
Hi, Can we do the same in drupal 8?

Akshaya (Wed, 07/27/2016 - 14:08)

Permalink

This write-up is amazing. Why? The first code listing is from the cited article. My advice? Use the original article info and then read this to find out the missing elements.

sano (Sat, 09/01/2018 - 17:20)

Add new comment

The content of this field is kept private and will not be shown publicly.