3

Bom o que pretendo é o seguinte.

Eu tenho várias divs, e eles possuem inputs do tipo "radios", ou seja, quando as pessoas clicam na div, ela fica com borda.

Em vez de ter a bolinha do radius, as pessoas ao clicarem na div é como se selecionassem essa div,

Como poderei fazer isso, para que depois no submit, fosse enviado o id das divs?

@EDIT:

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="checkbox" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
    <input type="checkbox" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
    <input type="checkbox" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
  </div>
</form>

</body>
</html>

Aqui tenho um código que um amigo me passou com a solução do meu problema, contudo como faço para passar um valor pelo checkbox? Pretendo checkbox, pois quero mais que um valor.

3
  • Podes fazer isso com JavaScript ou com HTML na ordem certa e CSS. O que vais fazer com o valor dessa escolha? enviar por ajax ou formulário? Podes mostrar esse código?
    – Sergio
    Commented 2/11/2016 às 19:19
  • Não ficou muito claro a sua dúvida. Se for o que eu estou pensando, você pode usar um <label> no lugar da <div>. O radio ficará escondido (hidden) e o label fará o papel da div como um elemento em block. Commented 2/11/2016 às 19:20
  • Vou postar um código, que é o mais semelhante aquilo que eu quero.
    – Gonçalo
    Commented 2/11/2016 às 19:23

1 Resposta 1

3

Já tens o HTML na ordem correta, só falta o CSS:

#radio input {
	display: none;
}

#radio label {
	border: none;
	display: inline-block;
}

img { /* só para o exemplo */
  	height: 50px;
}

#radio input:checked + label {
	border: 1px #ccf solid;
}
<form>
  <div id="radio">
    <input type="checkbox" id="radio1" name="radio"><label for="radio1"><img src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a" /></label>
    <input type="checkbox" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a" /></label>
    <input type="checkbox" id="radio3" name="radio"><label for="radio3"><img src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a" /></label>
  </div>
</form>

1
  • 1
    É isso mesmo!, Obrigado Sérgio.
    – Gonçalo
    Commented 2/11/2016 às 19:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .