idによる光沢のある個別のチェックボックス項目

Question

idによってcheckboxGroupInput内の個々のチェックボックス項目にアクセスして、これらを個別にcssで変更できる方法はありますか？

例：次を使用して

：

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

私はcheckboxGroupInput内のすべてのチェックボックスを編集することができます。私は今、グループ内の個々のチェックボックスを編集したい。各オプションには固有のIDがありますか？

Answer 1

おそらくこれが役に立ちます。あなたのターミナルで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 sが存在していないようです。

Answer 2

JavaScriptをshinyjsで使用すると、各チェックボックスに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)