Как менять css класс div в зависимости от типа input поля на JS?

Question

Stacy None @Stasy11

The best epta

Как менять css класс div в зависимости от типа input поля на JS?

Всем доброго вечера!
Вопрос в следующем:
Есть 1 поле input, выглядит оно так:

<div class="radio">
   <input type="radio" name="radio1" id="radio1" value="option1" checked="">
       <label for="radio1">
           Small
       </label>
</div>

Нужен JS либо JQ скрипт который менял бы css класс div'a class = radio на checkbox checkbox-circle в зависимости от type =
Например если в input указан type radio то css класс div'a в который этот input обернут будет radio
А если type будет указан checkbox то класс div'a должен меняться на checkbox checkbox-circle

В JS и JQ не силён! Нуждаюсь в вашей помощи. Заранее спасибо!

Вопрос задан более трёх лет назад
304 просмотра

3 комментария

Подписаться 1 Простой 3 комментария

Николай Чуприк @choupa

Чего-то мне кажется, что это задача для бэкенда. Не представляю, как такая потребность может появиться непосредственно на клиенте.

Написано более трёх лет назад
shmatuan @shmatuan

Чисто из интереса - можешь скинуть задачу, для которого нужно это скриптом делать - может можно без этого обойтись?)

Написано более трёх лет назад

Николай Чуприк @choupa

shmatuan, видимо, что-то типа:

hello.html:

<html>
  <body>
    Hello world
  </body>
  <script>
    $.ajax( { url: 'hello.html' } )
    .done( function( response ) {
      var content = response.split( /<body>|</body>/ )[ 1 ];
      $( 'body' ).html( content );
    } )
  </script>
</html>

Написано более трёх лет назад

Решения вопроса 1

2 комментария

Mesuti @Mesuti

У Вас есть возможность показать вариант на нативном JS ?

Написано более трёх лет назад

Николай Чуприк @choupa

let myRadio = document.querySelectorAll( 'input[type=radio]' );
for ( var i = 0; i < myRadio.length; i++ )
  myRadio.parentElement.className = 'radio';

let myCheckbox = document.querySelectorAll( 'input[type=checkbox]' );
for ( var i = 0; i < myCheckbox.length; i++ )
  myCheckbox.parentElement.className = 'checkbox  checkbox-circle';

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

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

JavaScript

Простой
Обьясните про функцию массив?
- 1 подписчик
- час назад
- 12 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 7 часов назад
- 46 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 7 часов назад
- 29 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 12 часов назад
- 45 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 12 часов назад
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 16 часов назад
- 58 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 17 часов назад
- 37 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 18 часов назад
- 29 просмотров
0

ответов
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- вчера
- 31 просмотр
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- вчера
- 113 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Сделать бэкап сайта(форума) и установить его на сервер

23 нояб. 2024, в 04:31

2000 руб./за проект

Смонтировать видео

23 нояб. 2024, в 01:31

1000 руб./за проект

Настроить сайт

23 нояб. 2024, в 00:16

2000 руб./за проект

Чего-то мне кажется, что это задача для бэкенда. Не представляю, как такая потребность может появиться непосредственно на клиенте.
Чисто из интереса - можешь скинуть задачу, для которого нужно это скриптом делать - может можно без этого обойтись?)
shmatuan, видимо, что-то типа:

hello.html:

<html> <body> Hello world </body> <script> $.ajax( { url: 'hello.html' } ) .done( function( response ) { var content = response.split( /<body>|</body>/ )[ 1 ]; $( 'body' ).html( content ); } ) </script> </html>

Answer 1 · 2018-10-29 22:51:56

Николай Чуприк @choupa

Архитектор (обычный, который строит)

$( 'input[type=radio]' ).parent().addClass( 'radio' );
$( 'input[type=checkbox]' ).parent().removeClass( 'radio' ).addClass( 'checkbox  checkbox-circle' );

Ответ написан более трёх лет назад

2 комментария

Как менять css класс div в зависимости от типа input поля на JS?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт