Замена SVG при нажатии на неё

Question

Товарищи, доброго дня, вечера, у кого как. Следующий вопрос: как заменить svg на другую при нажатии на неё? Нужно максимально просто.

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="checkbox-icon" class="css-8s785g">
<rect width="24" height="24" rx="4" fill="#151418"></rect>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.707 8.707L10 17.414l-4.707-4.707 1.414-1.414L10 14.586l7.293-7.293 1.414 1.414z" fill="#fff"></path>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="checkbox-icon" class="css-8s785g">
<rect x="1" y="1" width="22" height="22" rx="3" stroke="#151418" stroke-width="2"></rect>
</svg>

Буду благодарен.

Answer 1

const checkbox = document.querySelector('.checkbox');
const imgChecked = document.querySelector('.checked');
const imgNotChecked = document.querySelector('.not-checked');

const showCheckbox = () => {
  imgChecked.classList.toggle('visible');
  imgNotChecked.classList.toggle('visible');
  if (!checkbox.checked) {
    checkbox.checked = true;
  } else {
    checkbox.checked = false;
  }

}


imgChecked.addEventListener('click', showCheckbox);
imgNotChecked.addEventListener('click', showCheckbox)

.img {
  display: none;
  cursor: pointer;
}

.visible {
  display: inline-block;
}

<input class="checkbox" type="checkbox">
<svg class="img checked visible" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="checkbox-icon" class="css-8s785g">
            <rect x="1" y="1" width="22" height="22" rx="3" stroke="#151418" stroke-width="2"></rect>
        </svg>
<svg class="img not-checked " width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="checkbox-icon" class="css-8s785g">
            <rect width="24" height="24" rx="4" fill="#151418"></rect>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.707 8.707L10 17.414l-4.707-4.707 1.414-1.414L10 14.586l7.293-7.293 1.414 1.414z" fill="#fff"></path>
        </svg>

БЛОГ НА HUSL

Замена SVG при нажатии на неё

Ответы (1 шт):