Форум

face2005 · #1 (**permalink**) 25.12.2020, 16:44

Добрый день! есть набор радиокнопок и после инпута стоит текст

<label for="field_omiiy-0">
	<input type="radio" name="item_meta[45]" id="field_omiiy-0" value="Для жизни" >
  Для жизни
</label>

подскажите как его обернуть в тег span ? не могу стилизовать его при выделеном радио инпуте

рони · #2 (**permalink**) 25.12.2020, 17:29

face2005,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  span{
      color: red;
  }

  </style>
</head>

<body>
<label for="field_omiiy-0">
	<input type="radio" name="item_meta[45]" id="field_omiiy-0" value="Для жизни" >
  Для жизни
</label>
<script>
  let label = document.querySelector('[for="field_omiiy-0"]');
  let span = document.createElement('SPAN');
  label.childNodes.forEach(el => el.nodeType == 3 && span.append(el));
  label.append(span);
</script>

</body>
</html>

face2005 · #3 (**permalink**) 25.12.2020, 17:46

Спасибо большое! но мне бы как-то универсально... таких форм несколько, но структура одинаковая

<div class="frm_opt_container">
		<div class="frm_radio">
           <label for="field_omiiy-0">
		<input type="radio" name="item_meta[45]" id="field_omiiy-0" value="Для жизни" > Для жизни
           </label>
        </div>
		<div class="frm_radio">
          <label for="field_omiiy-1">
		<input type="radio" name="item_meta[45]" id="field_omiiy-1" value="Как инвестицию" > Как инвестицию
          </label>
        </div>
</div>

рони · #4 (**permalink**) 25.12.2020, 18:11

Сообщение от face2005

но мне бы как-то универсально...

что мешает добавить цикл по нужным элементам вместо строки 21?

рони · #5 (**permalink**) 25.12.2020, 18:21

face2005,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  span{
      color: red;
  }

  </style>
</head>

<body>
<div class="frm_opt_container">
		<div class="frm_radio">
           <label for="field_omiiy-0">
		<input type="radio" name="item_meta[45]" id="field_omiiy-0" value="Для жизни" > Для жизни
           </label>
        </div>
		<div class="frm_radio">
          <label for="field_omiiy-1">
		<input type="radio" name="item_meta[45]" id="field_omiiy-1" value="Как инвестицию" > Как инвестицию
          </label>
        </div>
</div>

<script>
  document.querySelectorAll('.frm_opt_container label').forEach(label =>{
  let span = document.createElement('SPAN');
  label.childNodes.forEach(el => el.nodeType == 3 && span.append(el));
  label.append(span);})
</script>

</body>
</html>

face2005 · #6 (**permalink**) 25.12.2020, 18:59

огромное спасибо!

Форум

Справочник

Discord чат

Курсы javascript