Div input type Radius

Asked

Viewed 68 times

3

Well what I want is this.

I have several Ivs, and they have inputs like "radios", that is, when people click on the div, it gets edge.

Instead of having the Radius ball, people clicking on the div is like selecting that div,

How can I do this, so that later in Submit, was sent the id of the 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>

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

php javascript html

  • You can do this with Javascript or HTML in the right order and CSS. What will you do with the value of that choice? send by ajax or form? You can show that code?

  • Your question is not very clear. If that’s what I’m thinking, you can use <label> instead of <div>. The radio will be hidden (Hidden) and the label will play the role of the div as a block element.

  • I will post a code, which is the most similar to what I want.

1 answer

3


You already have the 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>
    <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

    That’s right! , Thank you Sergio.

Browser other questions tagged php javascript html

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