Question

有没有办法通过id访问checkboxGroupInput中的各个复选框项目，以便可以通过css单独修改这些项目？

示例：

使用以下内容：

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

我可以编辑checkboxGroupInput中的所有复选框。我现在想要编辑组中的每个单独的复选框。每个选项都有唯一的ID吗？

Answer 1

您可以使用带有shinyjs的JavaScript为每个复选框添加ID。

以下是如何执行此操作的基本示例。如果要动态创建checkboxGroupInput，请确保在创建checkboxGroupInput后执行JavaScript。

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)

Answer 2

也许这有帮助。如果您在终端中输入checkboxGroupInput("A", "B", letters[1:2])，您将获得实际的HTML代码

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>

似乎没有任何ID分配给各个复选框。

闪亮 - 按ID访问各个复选框项目

2 个答案: