How to leave a div with the same operation as a radio button?

Question

How to leave a div with the same operation as a radio button?

Navigation

#1 by (4 votes)

1

I am developing an employee metric system, performance appraisal, I have <div> 's that have been table-shaped on my form to qualify each option as Rare , As times , frequent , always or N / A

The issue is that I do not know if there is a possibility of causing me to select a <div> of the Rare column, for example, and then changing the selection to Always refine the selection by taking the previous one. Remember that when I select the div it changes to the color corresponding to the column (this is working but it is coloring the whole table so I want to do as a radio button, but I do not know how to do it).

PHP code that generates HTML:

<?php
$count = 1;
foreach($agrupadores as $agrupador){
    <div class="row" style='margin-bottom: 30px;'>
        <div class="col-xs-12" style="border:solid 1px #6495ED;padding:25px;">
        <b>$agrupador['mea_titulo']</b>
        <div class="row">
        <div class="col-xs-1"></div>
        <div class="col-xs-6"></div>
        foreach($alternativas[$agrupador['mea_codigo']] as $alternativa){
        <div class="col-xs-1">$alternativa['mat_titulo']</div>
    }
    </div>
        foreach($opcoes[$agrupador['mea_codigo']] as $opcao){ 
        <div class="row">
            <input type="hidden" name="mop_codigo" id="mop_codigo" value="$opcao['mop_codigo']">
            <input type="hidden" name="mat_codigo" id="mat_codigo" value="">
            <div class="col-xs-1 dv_border heColunas">Q$count></div>
            <div class="col-xs-6 dv_border heColunas">$opcao['mop_titulo']</div>
            foreach($alternativas[$agrupador['mea_codigo']] as $alternativa){
            <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="$alternativa['mat_cor']" data-opcao="$opcao['mop_codigo']" data-alternativa="$alternativa['mat_codigo']" data-valor="$alternativa['mat_valor']" data-agrupador="$agrupador['mea_codigo']">&nbsp;<input type="radio" name="alternativa" id="alternativa" class="alternativa" style="visibility: hidden;"></div>
        }
        </div>
            $count++; }
    </div>    
        </div>    
}
?>

HTML generated

$('body').on("click", "#heColunas", function() {

  var alternativa = $(this).data("alternativa"); // retorna o código da alternativa da coluna selecionada
  var valor = $(this).data("valor"); // retorna o valor da coluna selecionada  
  var agrupador = $(this).data("agrupador"); // retorna o código do agrupador vinculado à alternativa
  var opcao = $(this).data("opcao"); // retorna o código da opção vinculada à alternativa
  var cor_alt = $(this).data("cor"); // retorna a cor da alternativa


  if (valor == "2") {
    $(this).css("background-color", "#" + cor_alt);
  } else if (valor == "3") {
    $(this).css("background-color", "#" + cor_alt);
  } else if (valor == "4") {
    $(this).css("background-color", "#" + cor_alt);
  } else {
    $(this).css("background-color", "#" + cor_alt);
  }
});

.dv_border {
  border: solid 1px #cccccc;
}

.heColunas {
  height: 50px;
  padding: 5px;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-xs-12" id="div_perguntas" style="margin-top:70px;">
  <div class="row" style="margin-bottom: 30px;">
    <div class="col-xs-12" style="border:solid 1px #6495ED;padding:25px;">
      <b>COMPORTAMENTAL</b>

      <div class="row">
        <div class="col-xs-1"></div>
        <div class="col-xs-6"></div>
        <div class="col-xs-1">Raro</div>
        <div class="col-xs-1">Às Vezes</div>
        <div class="col-xs-1">Frequente</div>
        <div class="col-xs-1">Sempre</div>
        <div class="col-xs-1">NA</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-1" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q1</div>
        <div class="col-xs-6 dv_border heColunas">Executa a carga horária proposta, correspondente a sua função, levando em consideração o horário de entrada, almoço e saída.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-1" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-1" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-1" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-1" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-1" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-2" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q2</div>
        <div class="col-xs-6 dv_border heColunas">Possui faltas no período.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-2" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-2" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-2" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-2" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-2" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-3" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q3</div>
        <div class="col-xs-6 dv_border heColunas">Se possui faltas, todas são justificadas.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-3" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-3" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-3" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-3" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-3" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-4" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q4</div>
        <div class="col-xs-6 dv_border heColunas">É flexível, sabendo se adaptar a todas mudanças que ocorrem.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-4" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-4" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-4" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-4" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-4" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-5" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q5</div>
        <div class="col-xs-6 dv_border heColunas">Está sempre disposto a realizar as atividades propostas pelo cliente, pela coordenação ou pela empresa.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-5" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-5" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-5" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-5" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-5" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-6" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q6</div>
        <div class="col-xs-6 dv_border heColunas">É receptivo aos feedbacks recebidos.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-6" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-6" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-6" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-6" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-6" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-7" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q7</div>
        <div class="col-xs-6 dv_border heColunas">Possui boa Relação com seus colegas de trabalho, subordinados, superiores e cliente.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-7" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-7" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-7" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-7" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-7" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-8" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q8</div>
        <div class="col-xs-6 dv_border heColunas">Mantém uma postura calma diante a situações adversas.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-8" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-8" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-8" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-8" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-8" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-9" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q9</div>
        <div class="col-xs-6 dv_border heColunas">Participa dos eventos sugeridos pela empresa e estimula a sua equipe a participar.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-9" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-9" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-9" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-9" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-9" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-10" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q10</div>
        <div class="col-xs-6 dv_border heColunas">Segue as normas da empresa e faz com que seus subordinados as sigam também.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-10" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-10" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-10" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-10" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-10" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-11" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q11</div>
        <div class="col-xs-6 dv_border heColunas">É organizado, mantendo a mesa, diretório e pasta física do projeto dentro dos padrões.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-11" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-11" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-11" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-11" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-11" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-12" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q12</div>
        <div class="col-xs-6 dv_border heColunas">Se preocupa em melhorar e se desenvolver cada vez mais.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-12" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-12" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-12" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-12" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-12" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>
      <div class="row">
        <input name="mop_codigo" id="mop_codigo" value="501-13" type="hidden">
        <input name="mat_codigo" id="mat_codigo" value="" type="hidden">
        <div class="col-xs-1 dv_border heColunas">Q13</div>
        <div class="col-xs-6 dv_border heColunas">Evita desperdícios e a elevação de custos, tanto para a empresa, quanto para o cliente.</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ff0000" data-opcao="501-13" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-13" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-13" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-13" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;</div>
        <div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff" data-opcao="501-13" data-alternativa="501-5" data-valor="5" data-agrupador="501-1">&nbsp;</div>
      </div>

    </div>
  </div>

php javascript html jquery

asked by anonymous 10.03.2017 / 18:07

1 answer

Responsive Site with% load in css and jquery

score 4 · Answer 1

In this example I'm using bootstrap just to embellish

$(function() {
  $('div.product-chooser').not('.disabled').find('div.product-chooser-item').find('span').on('click', function() {
    $(this).parent().parent().find('span').removeClass('label-danger');
    $(this).parent().parent().find('div.product-chooser-item').find('span').addClass('label-info');
    $(this).addClass('label-danger');
    $(this).parent().find('input[type="radio"]').prop("checked", true);
  });
});
$('#button').on('click', function(e) {
  alert($('input[type="radio"]:checked').val());
})

div.product-chooser div.product-chooser-item input {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-md-12 product-chooser">
  <div class="col-md-2 col-xs-2 col-lg-2 product-chooser-item">
    <span class="label label-info">Raro</span>
    <input name="box" value="raro" required type="radio">
  </div>
  <div class="col-md-2 col-xs-2 col-lg-2 product-chooser-item">
    <span class="label label-info">As vezes</span>
    <input name="box" value="asvezes" type="radio">
  </div>
  <div class="col-md-2 col-xs-2 col-lg-2 product-chooser-item">
    <span class="label label-info">Frequente</span>
    <input name="box" value="frequente" type="radio">
  </div>
  <div class="col-md-2 col-xs-2 col-lg-2 product-chooser-item">
    <span class="label label-info">Sempre</span>

    <input name="box" value="sempre" type="radio">
  </div>
  <div class="col-md-2 col-xs-2 col-lg-2 product-chooser-item">
    <span class="label label-info">N/A</span>
    <input name="box" value="na" type="radio">
  </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 form-horizontal" style="margin-top:30px;">
  <button name="button" id="button" type="button" class="btn btn-primary btn-lg btn-block">Prosseguir</button>
</div>

See, however, I use a radio-type input, however I hide it from the form

With this HTML you passed:

$(function() {
  $('td').on('click', function() {
    $(this).find('input[type="radio"]').prop("checked", true);
    $(this).parent().find('td').css("background-color", "#fff");
    color = $(this).find('input[type="radio"]').val();
    color = pintar(color);
    $(this).css("background-color", color);
  });
});

function pintar(cor) {
  switch (cor) {
    case 'raro':
      return '#f00';
      break;
    case 'asvezes':
      return '#fc0';
      break;
    case 'frequentemente':
      return '#9c0';
      break;
    case 'sempre':
      return '#090';
      break;
    case 'na':
      return 'fff';
      break;
    default:
      return '';
  }
}
$('#enviar').on('click', function(e) {
  var teste = $('input[type=radio]:checked').map(
    function() {
      return {
        "name": this.name,
        "value": this.value
      }
    }).get();
    console.log(teste);
})

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg .tg-yw4l {
  vertical-align: top
}

tr input {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

"ff0000" data-opcao="501-5" data-alternativa="501-1" data-valor="2" data-agrupador="501-1">&nbsp;
</div><div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffcc00" data-opcao="501-5" data-alternativa="501-2" data-valor="3" data-agrupador="501-1">&nbsp;
</div><div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="99cc00" data-opcao="501-5" data-alternativa="501-3" data-valor="4" data-agrupador="501-1">&nbsp;
</div><div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="009900" data-opcao="501-5" data-alternativa="501-4" data-valor="5" data-agrupador="501-1">&nbsp;
</div><div class="col-xs-1 dv_border heColunas" id="heColunas" data-cor="ffffff"

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="tg">
  <tr>
    <th class="tg-yw4l" colspan="7">PESQUISA COMPORTAMENTAL</th>
  </tr>
  <tr>
    <td class="tg-yw4l" colspan="2"></td>
    <td class="tg-yw4l">Raro</td>
    <td class="tg-yw4l">As vezes</td>
    <td class="tg-yw4l">Frequentemente</td>
    <td class="tg-yw4l">Sempre</td>
    <td class="tg-yw4l">N/A</td>
  </tr>
  <tr>
    <td class="tg-yw4l">Q1</td>
    <td class="tg-yw4l">Executa a carga horária proposta, correspondente a sua função, levando em consideração o horário de entrada, almoço e saída.</td>
    <td class="tg-yw4l"><input name="q1" value="raro" required type="radio"></td>
    <td class="tg-yw4l"><input name="q1" value="asvezes" type="radio"></td>
    <td class="tg-yw4l"><input name="q1" value="frequentemente" type="radio"></td>
    <td class="tg-yw4l"><input name="q1" value="sempre" type="radio"></td>
    <td class="tg-yw4l"><input name="q1" value="na" type="radio"></td>
  </tr>
  <tr>
    <td class="tg-yw4l">Q2</td>
    <td class="tg-yw4l">Possui faltas no período.</td>
    <td class="tg-yw4l"><input name="q2" value="raro" required type="radio"></td>
    <td class="tg-yw4l"><input name="q2" value="asvezes" type="radio"></td>
    <td class="tg-yw4l"><input name="q2" value="frequentemente" type="radio"></td>
    <td class="tg-yw4l"><input name="q2" value="sempre" type="radio"></td>
    <td class="tg-yw4l"><input name="q2" value="na" type="radio"></td>
  </tr>
</table>
<button id="enviar" name="enviar">Enviar</button>

The function that checks each selected question I've implemented using map of jQuery , see:

$('#enviar').on('click', function(e) {
  var teste = $('input[type=radio]:checked').map(
    function() {
      return {
        "name": this.name,
        "value": this.value
      }
    }).get();
    console.log(teste);
})

It searches for each radio that is selected and assembles the array with the name of the radio group (in this case the name of the question) and the value that is selected

jQuery(function() {
  // Em qualquer td que ser clicado 
  jQuery('td').on('click', function() {
    // Procura o radio dentro do td clicado e seleciona ele, desconsiderando os outros do grupo da questão
    jQuery(this).find('input[type="radio"]').prop("checked", true);
    // Procura o no pai do td, no caso tr, e seta todos os td's dessa seleção com a cor padrão #fff
    jQuery(this).parent().find('td').css("background-color", "#fff");
    // pega o valor do td
    color = jQuery(this).find('input[type="radio"]').val();
    // de acordo com o valor selecionado eu obtenho também a cor
    color = pintar(color);
    // pinto o td clicado
    jQuery(this).css("background-color", color);
  });
});