On/Off Checkbox to toggle filter value in views exposed filter

Question

I am using Better Exposed Filters Module and Has Boyfriend field is Boolean Yes/No field type of the content.

The Current View I have is:

When I click the Yes Checkbox I get:

My quest is when the checkbox is not-checked it'd only display girls without boyfriend like: (please ignore the filters here, I just showed it to explain my question, the filter should not have No, it should be default filter)

I can acheive this with such multiple-checkbox as above but I have the requirements to display only Girls without Boyfriend as default display list. When the checkbox Yes is clicked it'd hide all the Girls without boyfriends and display only Girls who has boyfriend.

There were few similar questions like this when I was searching like This and This but the answers doesn't satisfy my requirements.

Answer 1

Not totally sure if this is the same as your requirements, but I managed to have one checkbox that only shows relevant content when checked. Basically, I chose these options in filter options:

1. Expose this filter to visitors, to allow them to change it
2. Filter type to expose: Single filter
3. Is one of: (select the 'on' value)
4. Allow multiple selections (checked)
5. Limit list to selected items (checked)

Then in BEF: 6. Display exposed filter as: Checkboxes/radio buttons.

So, pretty much the only difference is the selection of "Limit list to selected items" in the filter options. See pic below. (And it doesn't use jquery, so should be more performant) Hope that helps.

.

Answer 2

Whenever I run into issues like these, I tend to use the grouped option with exposed filters. You shouldnt need better exposed filters at all for this.

1. Choose 'Grouped Filter' options
2. Choose 'radios'
3. uncheck 'optional' to make the filter required (and not display the -any- option)
4. Choose 'allow multiple selections' so one can choose either/and and so that checkboxes appear.
5. Configure the grouped filters similarly (I used the panopoly 'featured' boolean field since it was readily available).

Answer 3

I fixed this with Simple jQuery functions.

At first I set the views filter to default as No. Like:

Then I hid the div that contains No checkbox with CSS Class element-invisible like:

$('div.containsNoCheckbox').addClass('element-invisible');

Then I toggled between checkbox On/Off with:

$('#YesId').change(function () {                 
                 if($('#NoId').is(':checked')) {
                     $('#NoId').prop('checked', false );
                 }
            });

When I check the Yes Checkbox, this will Uncheck the No Checkbox.

When I Uncheck the Yes Checkbox, default value defined in the filter will be used. This how it toggles now.

Answer 4

I wanted to implement a similar approach and I finally found a solution, perhaps it will help some others.

I took these steps

1. Implement hook_form_alter()

   • Add a new form element checkbox
   • hide() the original form element
   • Add a new validation callback

2. Created the validation function

   • calculate the desired filter input
   • use form_set_value() on original filter element

    function hook_form_alter($form, $form_state, $form_id) {
        if (checkIfItIsTheDesiredForm()) {
            hide($form['originalFilter']);
            $form['newCheckbox'] = array(
                '#type'         => 'checkbox',
                '#title'        => 'Boyfriend',
                '#return_value' => 1,
                '#default_value' => 0,
            );
            $form['#validate'] = array_merge(array('manipulateFilterLogic'),$form['#validate']);
        }
    }
    function manipulateFilterLogic ($form, $form_state) {
        if (checkIfItIsTheDesiredForm()) {
            $filterValue =  ($form_state['input']['newCheckbox']) ? 1 : 'All';
            form_set_value($form['originalFilter'],$filterValue, $form_state);
        }
    }