Отметка чекбокса при нажатии на иконку

Question

Необходимо отметка чекбокса при нажатии на определённую иконку.

.rad {
  position: relative;
  top: 20px;
  right: 64px;
  height: 12px;
}
.rad1 {
  position: relative;
  top: 20px;
  right: -25px;
}

<img style="height: 35px; width: 35px; position: relative; right: -10px;" src="http://yarkov.org/wp-content/uploads/2016/02/vk-icon.png">
<img style="height: 35px; width: 35px; position: relative; left: 86px;" src="https://images.vexels.com/media/users/3/137380/isolated/preview/1b2ca367caa7eff8b45c09ec09b44c16-instagram-icon-logo-by-vexels.png">
<input class="rad" type="checkbox" name="Instagram">
<input class="rad1" type="checkbox" name="Vk">

score 3 · Accepted Answer · answered Apr 11 '18 at 15:35

Используйте элементы label и id для чекбоксов:

.rad {
  position: relative;
  top: 20px;
  right: 64px;
  height: 12px;
}
.rad1 {
  position: relative;
  top: 20px;
  right: -25px;
}

<label for="chkInstagram">
  <img style="height: 35px; width: 35px; position: relative; right: -10px;"
    src="http://yarkov.org/wp-content/uploads/2016/02/vk-icon.png">
</label>
<label for="chkVK">
  <img style="height: 35px; width: 35px; position: relative; left: 86px;"
    src="https://images.vexels.com/media/users/3/137380/isolated/preview/1b2ca367caa7eff8b45c09ec09b44c16-instagram-icon-logo-by-vexels.png">
</label>
<input class="rad" type="checkbox" name="Instagram" id="chkInstagram">
<input class="rad1" type="checkbox" name="Vk" id="chkVK">

Спасибо большое! – Stranger Apr 11 '18 at 15:52 — Stranger, Apr 11 '18 at 15:52

score 2 · Answer 2 · answered Apr 11 '18 at 15:57

Можно сделать и так:

.switch {
  width: 35px;
  height: 35px;
  display: inline-block;
}
.instagram-icon {
  background: url('https://images.vexels.com/media/users/3/137380/isolated/preview/1b2ca367caa7eff8b45c09ec09b44c16-instagram-icon-logo-by-vexels.png');
}
.vk-icon {
  background: url('http://yarkov.org/wp-content/uploads/2016/02/vk-icon.png');
}
.switch input {
  display: none;
}
.toogle-icon {
  display: inline-block;
  width: inherit;
  height: inherit;
  cursor: pointer;
  background-size: cover;
  transition: .75s;
  filter: grayscale(100%);
}
input:checked+.toogle-icon {
  filter: grayscale(0%);
}

<label class="switch">
  <input type="checkbox" name="instagram">
  <span class="toogle-icon instagram-icon"></span>
</label>

<label class="switch">
  <input type="checkbox" name="vk">
  <span class="toogle-icon vk-icon"></span>
</label>

Отметка чекбокса при нажатии на иконку

2 Answers2