Изменить изображение метки с радио входа

Я пытаюсь изменить изображения меток, введя переключатель с помощью JavaScript или CSS.

Я пробовал "input[type = "radio"]:not(:checked) + label" в CSS и также пытался изменить его с помощью JavaScript.

Что у меня есть на данный момент:

var service1 = document.getElementById('service1');
var service2 = document.getElementById('service2');
var service3 = document.getElementById('service3');

if (service1 == document.getElementById('service1').checked){
	document.getElementById('service2').src = "decent_rate_unchecked.png";
	document.getElementById('service3').src = "good_rate_unchecked.png";
}else if (service2 == document.getElementById('service2').checked){
	document.getElementById('service1').src = "bad_rate_unchecked.png";
	document.getElementById('service3').src = "good_rate_unchecked.png";
}else{
	document.getElementById('service2').src = "bad_rate_unchecked.png";
	document.getElementById('service3').src = "decent_rate_unchecked.png";
}

#service1 input[type = "radio"]:not(:checked) + label{
	border: 5px solid black;
	border-radius: 25px;
}

<form action = "Sources/form.php" method = "post" id = "container">
<label id = "service">
<input type = "radio" checked = "checked" id = "service1" name = "service" value = "1" required = "required"/>
<label for = "service1">
<img src = "http://lorempixel.com/50/50/technics/1/" style = "width:42px;height:42px;" for = "service1" title = "bad"/>
</label>
<input type = "radio" id = "service2" name = "service" value = "5,5" required = "required"/>
<label for = "service2">
<img src = "http://lorempixel.com/50/50/technics/1/" style = "width:42px;height:42px;" for = "service2" title = "decent"/>
</label>
<input type = "radio" id = "service3" name = "service" value = "10" required = "required"/>
<label for = "service3">
<img src = "http://lorempixel.com/50/50/technics/1/" style = "width:42px;height:42px;" for = "service3" title = "good"/>
</label>
</form>

Ожидаемый результат будет заключаться в том, что изображения перейдут в предварительно созданные «непроверенные» состояния изображений, фактические результаты заключаются в том, что ничего не происходит, за исключением того факта, что оно получает черную круглую рамку, если оно выбрано.

Попробуйте if (service1.checked). Вы должны протестировать свой код в консоли инструментов разработчика: document.getElementById('service1').checked должен вернуть boolean. Хотя service1, который является HTMLElement, никогда не будет равен boolean

— 28.05.2019 17:05

Локально размещенные изображения здесь не подойдут.

— 28.05.2019 17:06

Для изображений вы можете использовать: http://lorempixel.com/50/50/technics/1/, http://lorempixel.com/50/50/technics/2/, http://lorempixel.com/50/50/technics/3/

— 28.05.2019 17:15

CSS плохо сформирован. #service1 input[type = "radio"] должно быть просто #service1, так как они одинаковы.

— 28.05.2019 17:25

javascript html css

28.05.2019 16:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь вам не нужен js, я вижу много проблем с атрибутами разметки HTML, но для решения вашей проблемы просто используйте этот код,

form.service__rate label{
  display: inline-block;
  width: 42px;
  height: 42px;
}

#service1 + label{
/*background: url("./Sources/bad-rate.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/1/") center/cover no-repeat;
}
#service2 + label{
/*background: url("./Sources/decent-rate.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/1/") center/cover no-repeat;
}
#service3 + label{
/*background: url("./Sources/good-rate.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/1/") center/cover no-repeat;
}

#service1:checked + label {
/*background: url("./Sources/bad_rate_unchecked.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/2/") center/cover no-repeat;
}
#service2:checked + label {
/*background: url("./Sources/decent_rate_unchecked.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/2/") center/cover no-repeat;
}
#service3:checked + label {
/*background: url("./Sources/good_rate_unchecked.png") center/cover no-repeat;*/
background: url("http://lorempixel.com/50/50/technics/2/") center/cover no-repeat;
}

<!-- HTML -->
<form action = "Sources/form.php" method = "post" id = "container" class = "service__rate">
<fieldset>
  <legend>Service rate:</legend>
  <input type = "radio" checked = "checked" id = "service1" name = "service" value = "1" required = "required"/>
  <label for = "service1">
  </label>
  <input type = "radio" id = "service2" name = "service" value = "5,5" required = "required"/>
  <label for = "service2">
  </label>
  <input type = "radio" id = "service3" name = "service" value = "10" required = "required"/>
  <label for = "service3">
</label>
</fieldset>
</form>

28.05.2019 17:28

Другие вопросы по теме

Встроенное горизонтальное правило

Что делает тег <link rel="author" ..?

Не удается заставить кнопку изменить цвет на основе информации на следующей странице

Как я могу добавить класс для div внутри функции javascript

Есть ли способ получить нижний колонтитул html внизу любой страницы?

Как заставить Google Sheets привязанный code.js читать и действовать на JavaScript из не содержащегося удаленного файла .js?

Как удалить каждую третью строку из <tbody>, используя только JavaScript?

Модальность Bootstrap — проблема с остановкой видео в Safari и Chrome

Я не могу получить нужные параметры через ответ json (веб-скрейпинг)

Как предотвратить отправку формы до завершения функции onsubmit?

Изменить изображение метки с радио входа

Ответы 1

Другие вопросы по теме

Похожие вопросы