How do I show/hide panels based on multiple checkboxes?

[timyong80]

I have multiple checkboxes which depending on the selections, it would hide or show different panels. Consider one panel for one checkbox. There's no problem if I were to select only 1 checkbox. But if I were to select multiple checkboxes, it doesnt display the multiple panels.

    <input type="checkbox" token="search_option">
      <label>Search By</label>
      <choice value="sports">Sports</choice>
      <choice value="news">News</choice>
      <choice value="movies">Movies</choice>
      <change>
        <!-- Conditionally set/unset panels based on selections made -->
        <condition value="sports">
          <set token="input_sports">true</set>
          <unset token="input_news"></unset>
          <unset token="input_movies"></unset>
          <set token="output_sports">true</set>
          <unset token="output_news"></unset>
          <unset token="output_movies"></unset>
        </condition>
        <condition value="news">
          <set token="input_news">true</set>
          <unset token="input_sports"></unset>
          <unset token="input_movies"></unset>
          <set token="output_news">true</set>
          <unset token="output_sports"></unset>
          <unset token="output_movies"></unset>
        </condition>
        <condition value="movies">
          <set token="input_movies">true</set>
          <unset token="input_sports"></unset>
          <unset token="input_news"></unset>
          <set token="output_movies">true</set>
          <unset token="output_news"></unset>
          <unset token="output_sports"></unset>
        </condition>
        <condition match="$search_option$==&quot;sports news movies&quot; OR $search_option$==&quot;sports movies news&quot; OR $search_option$==&quot;news sports movies&quot; OR $search_option$==&quot;news movies sports&quot; OR $search_option$==&quot;movies sports news&quot; OR $search_option$==&quot;movies news sports&quot;">
          <set token="input_sports">true</set>
          <set token="input_news">true</set>
          <set token="input_movies">true</set>
          <set token="output_sports">true</set>
          <set token="output_news">true</set>
          <set token="output_movies">true</set>
        </condition>

Specifically,  when I select all 3 boxes (sports, news and movies), it doesn't output the 3 panels. I think it doesn't output because the individual checkbox already has a condition to unset the other panels if only one checkbox is selected. If I remove the unset condition for the individual checkbox,  then it would not remove the other panels if only a particular checkbox is selected.

So, how do:

1) If only one checkbox is selected, output only the specific panel

2) If two or more checkboxes are selected, then output the respective checkboxes

Thank you.

[bowesmana]

Have a play with this. It goes about the problem from a different angle, i.e. it uses a separate search that will set the tokens via a <done> clause. There's only one issue in that if you de-delect the final checkbox, it will not remove the deselected panel, as the search_options is not set.

<form>
  <label>TestToken</label>
  <fieldset submitButton="false" autoRun="false">
    <input type="checkbox" token="search_option" searchWhenChanged="true">
      <label>Search By</label>
      <choice value="sports">Sports</choice>
      <choice value="news">News</choice>
      <choice value="movies">Movies</choice>
      <delimiter> </delimiter>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <title>IS=$input_sports$, IN=$input_news$, IM=$input_movies$</title>
        <search>
          <query>
          </query>
        </search>
      </table>
    </panel>
    <panel>
      <table>
        <title>OS=$output_sports$, ON=$output_news$, OM=$output_movies$</title>
        <search>
          <query>
| makeresults
| eval options=split($search_option|s$," ")
| mvexpand options
| transpose 0 header_field=options
          </query>
          <done>
            <eval token="input_sports">if($result.sports$>=0,"true",null)</eval>
            <eval token="output_sports">if($result.sports$>=0,"true",null)</eval>
            <eval token="input_news">if($result.news$>=0,"true",null)</eval>
            <eval token="output_news">if($result.news$>=0,"true",null)</eval>
            <eval token="input_movies">if($result.movies$>=0,"true",null)</eval>
            <eval token="output_movies">if($result.movies$>=0,"true",null)</eval>
          </done>
        </search>
      </table>
    </panel>
  </row>
  <row depends="$input_sports$,$output_sports$">
    <panel depends="$input_sports$">
      <html>
        <h1>SPORTS INPUT PANEL</h1>
      </html>
    </panel>
    <panel depends="$output_sports$">
      <html>
        <h1>SPORTS OUTPUT PANEL</h1>
      </html>
    </panel>
  </row>
  <row depends="$input_news$,$output_news$">
    <panel depends="$input_news$">
      <html>
        <h1>NEWS INPUT PANEL</h1>
      </html>
    </panel>
    <panel depends="$output_news$">
      <html>
        <h1>NEWS OUTPUT PANEL</h1>
      </html>
    </panel>
  </row>
  <row depends="$input_movies$,$output_movies$">
    <panel depends="$input_movies$">
      <html>
        <h1>MOVIES INPUT PANEL</h1>
      </html>
    </panel>
    <panel depends="$output_movies$">
      <html>
        <h1>MOVIES OUTPUT PANEL</h1>
      </html>
    </panel>
  </row>
</form>

anyway, it might give you something to think about. Of course the search that is doing the token setting can be removes to a dashboard search or hidden itself - it's only visible so you can see what's going on.

Hope this helps