Div of type input radius

Question

Div of type input radius

Navigation

#1 by (2 votes)

3

Well, what I want is the following.

I have several divs, and they have inputs of the type "radios", that is, when people click on the div, it gets bordered.

Instead of having the radius ball, people clicking the div is like selecting this div,

How can I do this, so that after submitting, the id of the divs is sent?

@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><scriptsrc="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>

Here I have a code that a friend passed me with the solution of my problem, however how do I pass a value through the checkbox? I want to checkbox because I want more than one value.

php javascript html

asked by anonymous 02.11.2016 / 20:13

1 answer

Is it possible to determine the hardware address of the router? Updating values of an object from a collection via Binding WPF, MVVM

score 2 · Accepted Answer

You already have HTML in the correct order, only CSS is missing:

#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><inputtype="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><inputtype="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>