Форум

Webtest · #1 (**permalink**) 28.06.2014, 21:39

Здравствуйте.

У меня есть несколько ДИВов, можно ли сделать так, чтобы при нажатии на див у него менялся цвет рамки и сохранялся до того, как я нажму на другой див из этого же класса, вот простенький код:

<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 · #2 (**permalink**) 29.06.2014, 15:37

Никто мне не поможет?

рони · #3 (**permalink**) 29.06.2014, 16:16

Webtest,
а сделать перебор div по изменению input и установить класс div у которого input отмечен?

рони · #4 (**permalink**) 29.06.2014, 22:13

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>

Форум

Справочник

Discord чат

Курсы javascript