Сохранение цвета рамки DIV при нажатии, и сброс при нажатии на другой DIV этого класа
Здравствуйте.
У меня есть несколько ДИВов, можно ли сделать так, чтобы при нажатии на див у него менялся цвет рамки и сохранялся до того, как я нажму на другой див из этого же класса, вот простенький код: <form method="post" > <div class="div1" id="red"><input class="input1" type="radio" name="color" value="red"></div> <div class="div1" id="green"><input class="input1" type="radio" name="color" value="green"></div> <div class="div1" id="blue"><input class="input1" type="radio" name="color" value="blue"></div> <input type="submit" value='submit'> </form> |
Никто мне не поможет? :(
|
Webtest,
а сделать перебор div по изменению input и установить класс div у которого input отмечен? |
Webtest,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.div1{
border: 2px solid transparent;
}
</style>
<script type="text/javascript">
window.onload = function () {
var a = document.querySelectorAll(".div1");
Array.prototype.forEach.call(a, function (c) {
c.querySelector("input").onclick = function () {
Array.prototype.forEach.call(a, function (a) {
var b = a.querySelector("input");
a.style.borderColor = b.checked ? b.value : ""
})
}
})
};
</script>
</head>
<body>
<form method="post" >
<label><div class="div1" id="red"><input class="input1" type="radio" name="color" value="red" ></div></label>
<label><div class="div1" id="green"><input class="input1" type="radio" name="color" value="green"></div></label>
<label><div class="div1" id="blue"><input class="input1" type="radio" name="color" value="blue"></div></label>
<input type="submit" value='submit'>
</form>
</body>
</html>
|
| Часовой пояс GMT +3, время: 06:31. |