在 R Shiny 中，如何制作一个复选框表，该表还具有单独行/列的'全选”复选框？

Question

使用RShiny，我想显示一个表格（例如通过“DT”包），其中每个单元格包含一个复选框。在每行和列标题旁边，我想显示一个“全选”/“主复选框”，选择该复选框后，将选择相应行或列中的所有复选框。作为附加功能，左上角单元格中的复选框将选择表中的所有复选框。一个例子：尝试过的js我在这里找到了一个此功能的示例，其中一列有一个主复选框（使用一些JavaScript），但无法弄清楚如何将其扩展到我的要求。我

P粉757640504 · Answer

library(shiny)
library(DT)

rowName <- function(L) {
  as.character(
    checkboxInput(paste0("row", L), label = L, width = "150px")
  )
}
rowNames <- vapply(LETTERS[1:6], rowName, character(1))


ui <- fluidPage(
  # Sidebar panel
  sidebarPanel(),
  
  # Main panel with the table
  mainPanel(
    DTOutput("myTable")
  )
)

server <- function(input, output){
  dat <- data.frame(
    vapply(LETTERS[1:6], function(i){
      as.character(
        checkboxInput(paste0("col1-", i), label = NULL, width = "150px")
      )
    }, character(1)),
    vapply(LETTERS[1:6], function(i){
      as.character(
        checkboxInput(paste0("col2-", i), label = NULL, width = "150px")
      )
    }, character(1)),
    vapply(LETTERS[1:6], function(i){
      as.character(
        checkboxInput(paste0("col3-", i), label = NULL, width = "150px")
      )
    }, character(1))
  )
  
  names(dat) <- c(
    as.character(checkboxInput("col1", label = "1", width = "150px")),
    as.character(checkboxInput("col2", label = "2", width = "150px")),
    as.character(checkboxInput("col3", label = "3", width = "150px"))
  )
  
  rownames(dat) <- rowNames
  
  output$myTable <- renderDT({
    datatable(
      dat, 
      escape = FALSE,
      select = "none",
      options = list(
        columnDefs = list(
          list(targets = c(1, 2, 3), orderable = FALSE, className = "dt-center")
        ),
        initComplete = JS(
          "function() {",
          "  $('#col1').on('click', function(){",
          "    var cboxes = $('[id^=col1-]');",
          "    var checked = $('#col1').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#col2').on('click', function(){",
          "    var cboxes = $('[id^=col2-]');",
          "    var checked = $('#col2').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#col3').on('click', function(){",
          "    var cboxes = $('[id^=col3-]');",
          "    var checked = $('#col3').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowA').on('click', function(){",
          "    var cboxes = $('[id$=-A]');",
          "    var checked = $('#rowA').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowB').on('click', function(){",
          "    var cboxes = $('[id$=-B]');",
          "    var checked = $('#rowB').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowC').on('click', function(){",
          "    var cboxes = $('[id$=-C]');",
          "    var checked = $('#rowC').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowD').on('click', function(){",
          "    var cboxes = $('[id$=-D]');",
          "    var checked = $('#rowD').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowE').on('click', function(){",
          "    var cboxes = $('[id$=-E]');",
          "    var checked = $('#rowE').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowF').on('click', function(){",
          "    var cboxes = $('[id$=-F]');",
          "    var checked = $('#rowF').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "}"
        ),
        preDrawCallback = 
          JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
        drawCallback = 
          JS('function() { Shiny.bindAll(this.api().table().node()); } ')
      )
    )
  })
}

shinyApp(ui, server)

编辑：“全选”复选框

library(shiny)
library(DT)
library(htmltools)

rowName <- function(L) {
  as.character(
    checkboxInput(paste0("row", L), label = L, width = "150px")
  )
}
rowNames <- vapply(LETTERS[1:6], rowName, character(1))


sketch <- htmltools::withTags(
  table(
    class = "display",
    thead(
      tr(
        th(HTML(as.character(checkboxInput("allboxes", label = "ALL", width = "150px")))), 
        th(HTML(as.character(checkboxInput("col1", label = "1", width = "150px")))),
        th(HTML(as.character(checkboxInput("col2", label = "2", width = "150px")))),
        th(HTML(as.character(checkboxInput("col3", label = "3", width = "150px"))))
      )
    )
  )
)



ui <- fluidPage(
  br(),
  # Sidebar panel
  sidebarPanel(),
  
  # Main panel with the table
  mainPanel(
    DTOutput("myTable")
  )
)

server <- function(input, output){
  dat <- data.frame(
    vapply(LETTERS[1:6], function(i){
      as.character(
        checkboxInput(paste0("col1-", i), label = NULL, width = "150px")
      )
    }, character(1)),
    vapply(LETTERS[1:6], function(i){
      as.character(
        checkboxInput(paste0("col2-", i), label = NULL, width = "150px")
      )
    }, character(1)),
    vapply(LETTERS[1:6], function(i){
      as.character(
        checkboxInput(paste0("col3-", i), label = NULL, width = "150px")
      )
    }, character(1))
  )
  
  rownames(dat) <- rowNames
  
  output$myTable <- renderDT({
    datatable(
      dat, container = sketch,
      escape = FALSE,
      select = "none",
      options = list(
        columnDefs = list(
          list(targets = c(1, 2, 3), orderable = FALSE, className = "dt-center")
        ),
        initComplete = JS(
          "function() {",
          "  $('#allboxes').on('click', function(){",
          "    var cboxes = $('input[type=checkbox]');",
          "    var checked = $('#allboxes').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#col1').on('click', function(){",
          "    var cboxes = $('[id^=col1-]');",
          "    var checked = $('#col1').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#col2').on('click', function(){",
          "    var cboxes = $('[id^=col2-]');",
          "    var checked = $('#col2').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#col3').on('click', function(){",
          "    var cboxes = $('[id^=col3-]');",
          "    var checked = $('#col3').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowA').on('click', function(){",
          "    var cboxes = $('[id$=-A]');",
          "    var checked = $('#rowA').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowB').on('click', function(){",
          "    var cboxes = $('[id$=-B]');",
          "    var checked = $('#rowB').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowC').on('click', function(){",
          "    var cboxes = $('[id$=-C]');",
          "    var checked = $('#rowC').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowD').on('click', function(){",
          "    var cboxes = $('[id$=-D]');",
          "    var checked = $('#rowD').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowE').on('click', function(){",
          "    var cboxes = $('[id$=-E]');",
          "    var checked = $('#rowE').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "  $('#rowF').on('click', function(){",
          "    var cboxes = $('[id$=-F]');",
          "    var checked = $('#rowF').is(':checked');",
          "    cboxes.each(function(i, cbox) {",
          "      $(cbox).prop('checked', checked);",
          "    });",
          "  });",
          "}"
        ),
        preDrawCallback = 
          JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
        drawCallback = 
          JS('function() { Shiny.bindAll(this.api().table().node()); } ')
      )
    )
  })
}

shinyApp(ui, server)

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

尝试过的js

我尝试过的示例

编辑：“全选”复选框