Shiny - Zugriff auf einzelne Kontrollkästchen Elemente nach ID

Question

Gibt es eine Möglichkeit, einzelne Kontrollkästchen Elemente in einem checkboxGroupInput von ID zugreifen, so dass diese einzeln über CSS geändert werden können?

Beispiel:

auf folgende Arten:

#id input[type="checkbox"]:checked:after { 
 
\t \t background-color: #FE0004; 
 
}

ich alle Kontrollkästchen in einem checkboxGroupInput bearbeiten können. Ich möchte jetzt jedes einzelne Kontrollkästchen innerhalb einer Gruppe bearbeiten. Hat jede Option eine eindeutige ID?

Answer 1

Vielleicht hilft das. Wenn Sie checkboxGroupInput("A", "B", letters[1:2]) in Ihrem Terminal eingeben wil Sie den eigentlichen HTML-Code

checkboxGroupInput("A", "B", letters[1:2]) 
# <div id="A" class="form-group shiny-input-checkboxgroup shiny-input-container"> 
# <label class="control-label" for="A">B</label> 
# <div class="shiny-options-group"> 
#  <div class="checkbox"> 
#  <label> 
#   <input type="checkbox" name="A" value="a"/> 
#   <span>a</span> 
#  </label> 
#  </div> 
#  <div class="checkbox"> 
#  <label> 
#   <input type="checkbox" name="A" value="b"/> 
#   <span>b</span> 
#  </label> 
#  </div> 
# </div> 
# </div> 

bekommen Es scheint nicht, es gibt keine ID s auf die einzelnen Kontrollkästchen zugeordnet.

Answer 2

Sie können jeder Checkbox eine ID hinzufügen, indem Sie JavaScript mit shinyjs verwenden.

Hier ist ein einfaches Beispiel, wie Sie es tun können. Wenn Sie das checkboxGroupInput dynamisch erstellen, stellen Sie sicher, dass das JavaScript nach dem Erstellen des checkboxGroupInput ausgeführt wird.

library(shiny) 
library(shinyjs) 

ui <- fluidPage(
    shinyjs::useShinyjs(), 
    checkboxGroupInput("variable", "Variables to show:", names(iris)), 
    actionButton("bt1", "Add Style") 
) 

server <- function(input, output, session) { 
    # add an ID to each checkbox 
    shinyjs::runjs(HTML(' 
    var checkboxes = $("#variable").find(".checkbox span"); 
    for(var i = 0; i < checkboxes.length; i++) { 
     checkboxes[i].setAttribute("id", "checkbox_" + i); 
    } 
    ')) 

    observeEvent(input$bt1, { 
    # add a custom stytle to 3er checkbox ("checkbox_2") 
    shinyjs::runjs('$("#checkbox_2").attr("style", "background-color: #FE0004;")') 
    # you can also use shinyjs::addClass() 
    }) 
} 

shinyApp(ui, server)