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

Asked

Viewed 329 times

1

I’m developing a system of employee metrics, performance evaluation, I have <div>'which have been set in table form on my form to qualify each option as Rare, Sometimes, frequent, at all times or N/A.

The point is I don’t know if there’s any possibility of getting me to select a <div> column Rare, for example, and then changing the selection to At all times remake the selection by removing the previous one. Remembering that when selecting the div changes to the color corresponding to the column (this working but is coloring the entire table so I want to do as radio button, but I don’t 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>
<div class="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 jquery html
  • 1

    There’s no way to incorporate inside the div one radio and enjoy its natural functioning?

  • even if it does, only I do not know how to do to only color the one I select =(

  • What I intended to do: that the line Divs function as radio Buttons or I clicked on a color the one with its respective color as seen in the code and if to click on another of the same line to modify the usual answer to the times for example discolored the one that was selected and color the new selected as radio button understands.

1 answer

4

In this example I’m using bootstrap just to beautify

$(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>
<div class="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 that anyway I use an input type radio, but 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>
<table class="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 implemented using the 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 question name) 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);
  });
});

  • Bah little guy thanks for the help I’m already understanding better how I should solve I’ll do some tests here in the system and I’ll tell you again if it worked out or not, but it’s been worth all the help! Grateful!

  • thanks for the attention, but not being able to specify the input as visibility Hidden inside the div and in the jquery only put to modify with the color referring to that alternative as it was inserted in the database but this selecting all Divs and coloring all kkkk. have to help me a little more I’m making the code available now.

  • @Lucaspereira I suggest you remove the comments that are no longer needed, see: http://meta.pt.stackoverflow.com/a/5853/14262

Browser other questions tagged php javascript jquery html

You are not signed in. Login or sign up in order to post.