How to Check a Radio Button in the Table Row Based on That Column Header

How to check a radio button in the table row based on that column header?

You better consider using data-attributes where you need things like this.

Makes life easy for you.

Just add heading as data property to checkbox like

data-heading="MyHeader"

And then it'll be easy for you to select it like

$("input[data-heading='MyHeader2']")

$("input[data-heading='MyHeader2']").prop("checked", true)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><table>  <tr>    <th>      MyHeader    </th>    <th>      MyHeader2    </th>  </tr>  <tr>    <td>      <input type='radio' data-heading="MyHeader" name='testradio' />    </td>    <td>      <input type='radio' data-heading="MyHeader2" name='testradio1' />    </td>  </tr></table>

Show/Hide HTML table column based on radio button selection

Your solution can be simple JavaScript, not necessarily JQuery.

UPDATED: Live fiddle - updated (for continuous DOM updating)

Here is a demo for a solution Live fiddle (change the users value to see results)

Or just check the code:

<!-- put this at the end, before </body> -->
<script>
// set users via PHP
var users = "<?php if (isset($_POST['users'])) echo $_POST['users']; ?>";
// update the HTML without interfering with other scripts
(function(users){
  // check if PH
  if (users.length) {
    // update the radio option...
    var inputTag = document.querySelector('input[value="'+users+'"]');
    if (inputTag)
      inputTag.checked = true;
    // if users is "all"
    // hide the last TD of every column
    if (users == "all") {
      var lastTh = document.querySelector('tr th:last-child');
      lastTh.style.display = "none";
      var allLastTds = document.querySelectorAll('td:last-child');
      for (var i = 0; i< allLastTds.length; i++) {
        allLastTds[i].style.display="none";
      }
    }
    // if users is "approved"
    // make the checkbox disabled
    if (users == "approved") {
      thInputTag = document.getElementById("select_all");
      thInputTag.setAttribute("disabled", true);
    }
  }
})(users);
</script>

Also, you can rewrite this part (no PHP needed):

<input type='radio'  name='users' value='unapproved' /> Unapproved Candidates<br> 
<input type='radio'  name='users' value='approved' /> Approved Candidates<br>
<input type='radio' id='show' name='users' value='all'  /> All Candidates<br><br> 
<input type="submit" value="submit" id="submit"><br><br>

How can I get the value of a radio button inside a google visualization table

you don't need the form, you just need to wait for the chart's 'ready' event,

before assigning the change event.

see following working snippet,

select a radio to see the name and value...

google.charts.load('current', {  packages: ['controls', 'table']}).then(function () {  var rightWrapper = new google.visualization.ChartWrapper({    chartType: 'Table',    dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1I3N5DtdXGWFootaOCQM201K_ao2ZPWSWyw9_l7QcwQg/gviz/tq?sheet=User_my_crew&headers=1',    containerId: 'target_table_div',    query: 'SELECT A,B,C,D',    options: { 'width': 700, 'height': 500, 'allowHtml': true }  });
  google.visualization.events.addListener(rightWrapper, 'ready', onRightReady);
  rightWrapper.draw();
  function onRightReady() {    $('input[type="radio"]').on('change', calcForm2);  }});
function calcForm2(sender) {  console.log(sender.target.name, sender.target.value);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://www.gstatic.com/charts/loader.js"></script><div id="target_table_div"></div>

Radio button selection to show table on next output

In both cases, the first DT output shows the table as loaded (with good or bad names). One approach is to fix the column names silently:

library(shiny)
library(DT)

ui <- shinyUI(fluidPage(
  titlePanel("Uploading Files"),
  sidebarLayout(
    sidebarPanel(fileInput(
      'file1',
      'Choose CSV File',
      accept = c('text/csv',
                 'text/comma-separated-values,text/plain',
                 '.csv')
    )),
    mainPanel(
      DT::dataTableOutput('contents'),
      DT::dataTableOutput('filtered')
    )
  )
))


server <- function(input, output, session) {
  myData <- reactive({
    inFile <- input$file1
    if (is.null(inFile))
      return(NULL)
    data <- read.csv(inFile$datapath, header = TRUE)
    data
  })

  # Approach 1: fix the data silently
  # Replace column names if needed
  fixData <- reactive({
    req(input$file1)
    df <- myData()

    expectedColumns <- c("mpg", "cyl", "wt")
    if (!all(expectedColumns %in% colnames(myData()))) {
      #Change row to column and delete first row
      colnames(df) <- df[1, ]
      df = df[-1,]
    }  
    df
  })

  output$contents <- DT::renderDataTable({
    DT::datatable(myData())
  })

  data2 <- reactive({
    # Select columns of the dataframe
    df1 <- select(fixData(), mpg, cyl, wt)
    df1
  })

  #Output based on either raw or replaced column table
  output$filtered <- DT::renderDataTable({
    DT::datatable(data2())
  })
}

runApp(list(ui = ui, server = server))

Another approach is to use radio buttons as you have planned:

library(shiny)
library(DT)

ui<- shinyUI(fluidPage(
  titlePanel("Uploading Files"),
  sidebarLayout(
    sidebarPanel(
      fileInput('file1', 'Choose CSV File',
                accept=c('text/csv',
                         'text/comma-separated-values,text/plain',
                         '.csv')),
      # radio button to show either row or replaced column table
      radioButtons("radio", label = h3("Replace columns"),
                   choices = list("Raw table" = 1, "Change column names" = 2), 
                   selected = 1)
    ),
    mainPanel(
      DT::dataTableOutput('contents'),
      DT::dataTableOutput('filtered')
    )
  )
)
)

server <- function(input, output, session){

  myData <- reactive({
    inFile <- input$file1
    if (is.null(inFile)) return(NULL)
    data <- read.csv(inFile$datapath, header = TRUE)
    data
  })

  # Approach 2: click on an radioButton to fix the data

  fixData <- reactive({
    req(input$file1)
    df <- myData()
    if (input$radio == 2) {
      #Change row to column and delete first row
      colnames(df) <- df[1,]
      df = df[-1, ]
    }
    df
  })

  output$contents <- DT::renderDataTable({
    DT::datatable(myData())       
  })

  data2<- reactive({
    # Select columns of the dataframe
    df1 <- select(fixData(),mpg,cyl,wt)
    df1
  })

  #Output based on either raw or replaced column table
  output$filtered <- DT::renderDataTable({
    DT::datatable(data2())       
  })
}
runApp(list(ui=ui,server=server))

Get clicked Radio Button Values from all the row

Here is my attempt - note it is much simpler than the map and assume you only have radios that you want to handle on the page

Live Demo

$(function() {
  $("input[type=radio]").on("click",function() { 
    var clicked = [];
    $("input[type=radio]:checked").each(function() {
        clicked.push($(this).closest("td").prev().text()+"~"+this.value);
    });
    $("#an\\.ret\\.sys\\.4\\.").val(clicked);
  });    
});

If you need the NAME of the radio:

clicked.push(this.name+":"+this.value);

How to Check a Radio Button in the Table Row Based on That Column Header