【问题标题】：Cannot run JavaScript code when Shiny `renderUI` is used使用 Shiny `renderUI` 时无法运行 JavaScript 代码
【发布时间】：2021-09-29 14:34:05
【问题描述】：

我正在尝试将 JS 脚本（“全选”框）应用到动态呈现的 UI，但以下操作不起作用：

library(shinyjs)

ui <- fluidPage(
    useShinyjs(),
    
    uiOutput("checkbox_ui")
)

server <- function(input, output, session) {
    
    output$checkbox_ui <- renderUI({
        checkboxGroupInput(inputId = "myCheckbox",
                           label = NULL,
                           choices = c("All", "A", "B"))
    })
    
    runjs(HTML("
        $(\"#myCheckbox input[value='All']\").click(function(e) {
            $(\"#myCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "))
}

shinyApp(ui, server)

但是，当我跳过使用renderUI 时，会运行 JS 脚本：

library(shinyjs)

ui <- fluidPage(
    useShinyjs(),
    
    checkboxGroupInput(inputId = "myCheckbox",
                       label = NULL,
                       choices = c("All", "A", "B"))
)

server <- function(input, output, session) {
    
    runjs(HTML("
        $(\"#myCheckbox input[value='All']\").click(function(e) {
            $(\"#myCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "))
}

shinyApp(ui, server)

有人知道解决方法吗？

【问题讨论】：

标签： javascript r shiny shinyjs

【解决方案1】：

这是因为在执行runjs 时该复选框尚未呈现。

我会尝试：

runjs(HTML("setTimeout(function(){
        $(\"#myCheckbox input[value='All']\").click(function(e) {
            $(\"#myCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    });"))

如果这不起作用，我会尝试

observeEvent(input[["myCheckbox"]], {
  runjs(HTML("
        $(\"#myCheckbox input[value='All']\").click(function(e) {
            $(\"#myCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "))
})

编辑

这是一个可行的解决方案，不使用shinyjs：

library(shiny)

js <- paste(
  "$(document).ready(function(){",
  "  $('body').on('click', \"#myCheckbox input[value='All']\", function(e) {",
  "    var isChecked = $(e.target).prop('checked');",
  "    $(\"#myCheckbox input[value!='All']\").prop('checked', isChecked);",
  "  });",
  "});",
  sep = "\n"
)

ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  uiOutput("checkbox_ui")
)

server <- function(input, output, session) {
  
  output$checkbox_ui <- renderUI({
    checkboxGroupInput(inputId = "myCheckbox",
                       label = NULL,
                       choices = c("All", "A", "B"))
  })
  
}

shinyApp(ui, server)

【讨论】：

感谢您的帮助！第一个 JS 代码没有任何作用，而第二个只有在 All 框之前检查过一次之后才起作用。
有没有办法在 UI 中创建一个空的/不可见的checkboxGroupInput，然后在使用updateCheckboxGroupInput 在服务器函数中创建它之后直接更新它？
你可以试试，听起来很合理。也许只有choices = "All" 的初始checkboxGroupInput？
@6PO0222 查看我的编辑。一个更简单的工作解决方案。

【解决方案2】：

以下工作正常。

js <- "
        $(\"#myCheckbox input[value='All']\").click(function(e) {
            $(\"#myCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "

library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  
  checkboxGroupInput(inputId = "myCheckbox",
                     label = NULL,
                     choices = c("All", "A", "B"))
)

server <- function(input, output, session) {
  
  observeEvent(input[["myCheckbox"]], {
    updateCheckboxGroupInput(session,"myCheckbox")
    runjs(HTML(js))
  }, ignoreNULL = FALSE)

}

shinyApp(ui, server)

renderUI

ui <- fluidPage(
  useShinyjs(),
  
  uiOutput("uic")
)

server <- function(input, output, session) {
  
  output$uic <- renderUI({
    checkboxGroupInput(inputId = "myCheckbox",
                       label = NULL,
                       choices = c("All", "A", "B"))
  })
  
  observeEvent(input[["myCheckbox"]], {
    updateCheckboxGroupInput(session,"myCheckbox")
    runjs(HTML(js))
  }, ignoreNULL = FALSE)
  
}

shinyApp(ui, server)

【讨论】：