checkboxGroupInput with options for each tick (multiple possible ticks)

Question

I am very new in Shiny and I am sorry if my question seems obvious. I would be very grateful for any help on the matter.

I use checkboxGroupInput with multiple choice (e.g. days of week) and I need options to appear for each tick (e. g. hours).

I tried to add conditionalPanel for each option. But this only works if only one box is ticked. If two or more boxes are ticked, no option is shown. Moreover the conditional options appear at the bottom of all the checkboxGroupInput block.

Ideally, I would like the options of checkboxGroupInput to appear vertically (wihich is the default) and for each ticked option, a selectInput (or equivalently a checkboxGroupInput) appears on the right side of the ticked option with the conditional value.

I hope my question is clear enough and that it is not too difficult to implement!

Thanks a lot for any help :-)

shinyApp(

  ui = fluidPage(
    titlePanel("Week and time"),
    div(
      id = "form",
      checkboxGroupInput("days", "Days of week",
                  c("Monday", "Tuesday", "Wenesday")),
      conditionalPanel(condition = "input.days == 'Monday'",
                       selectInput("time",
                                   "Hours to choose Monday", 
                                   c("8h00", "9h00"))),
      conditionalPanel(condition = "input.days == 'Tuesday'",
                       selectInput("time",
                                   "Hours to choose Tuesday", 
                                   c("8h00", "9h00"))),
      actionButton("submit", "Submit", class = "btn-primary")
    )
  ),
  server = function(input, output, session) {
  }
)

Did the answer help you by any chance? If so, please mark it as accepted that the community is aware of it. Otherwise, point to what is missing. Thanks! — mnist, May 29 '20 at 07:35
@mnist I tried the code, but the result was not exactly what I expected... Anyway, I know how it is hard to get points on SO! — Flora Grappelli, Jun 02 '20 at 10:39

score 3 · Accepted Answer · answered May 24 '20 at 14:41

You nest two question together here. regarding the first one ("How to check whether the radioButton is clicked"), it is a pure JavaScript problem. I took the solution from here.

About the alignment: This is trickier. I show you a simple approach that just has two conditionalPanels with approx. the same vertical space so the other objects do not jump up and down. If you want complete control over this, rather go with single checkboxes. Have a checkbox and the selectInput in one row. In the server, you can have them in reactiveValues, for example.

Depends on you code structure which is more difficult to implement



shinyApp(

  ui = fluidPage(
    titlePanel("Week and time"),
    fluidRow(column(
      id = "form",
      width = 3,
      checkboxGroupInput("days", "Days of week",
                         c(HTML("Monday"), "Tuesday", "Wenesday"))),
      column(width = 9,
             # check whether Monday is in input.days
             conditionalPanel(condition = "input.days.indexOf('Monday') > -1",
                              selectInput("time",
                                          "Hours to choose Monday", 
                                          c("8h00", "9h00"))),
             # if Monday is not in input.days, show a div with the same size as the
             # selectInput
             conditionalPanel(condition = "input.days.indexOf('Monday') == -1",
                              div(style = "height:70px")),
             # check whether Tuesday is in input.days
             conditionalPanel(condition = "input.days.indexOf('Tuesday') > -1",
                              selectInput("time",
                                          "Hours to choose Tuesday", 
                                          c("8h00", "9h00"))),
             # if Tuesday is not in input.days, show a div with the same size as the
             # selectInput
             conditionalPanel(condition = "input.days.indexOf('Tuesday') == -1",
                              div(style = "height:70px"))
      )),
    fluidRow(actionButton("submit", "Submit", class = "btn-primary"))

  ),
  server = function(input, output, session) {
  }
)

checkboxGroupInput with options for each tick (multiple possible ticks)

1 Answers1