Форум

firsmember · #1 (**permalink**) 18.02.2023, 18:13

Доброго вечера многоуважаемые!
Я к вам с вопросом..

Подскажите пожалуйста, имею:

<div class="radioinputsblock">
  <label for="blabla1" class="radio label">
    <input type="radio" id="" name="progress" value="blabla1"  data-price-type="normal" data-price="5000" required="">
Я текст
  </label>
<label for="blabla2" class="radio label">
    <input type="radio" id="" name="progress" value="blabla2"  data-price-type="normal" data-price="5000" required="">
Я текст
  </label>
</div>

Радио кнопок в блоке .radioinputsblock может быть любое количество с любыми данными кроме них в блоке могут лежать и другие блоки,
Нужно только вынести все input из своих label и поместить каждый input над свой label, а также взять скопировать у каждого переносимого input - value в его id

Чтобы получилось вот так:

<div class="radioinputsblock">

<input type="radio" id="blabla1" name="progress" value="blabla1"  data-price-type="normal" data-price="5000" required="">
  <label for="blabla1" class="radio label">
Я текст
  </label>
<input type="radio" id="blabla2" name="progress" value="blabla2"  data-price-type="normal" data-price="5000" required="">
<label for="blabla2" class="radio label">
Я текст
  </label>
</div>

Заранее большое вам спасибо !

voraa · #2 (**permalink**) 18.02.2023, 18:26

Что то типа такого

const block = document.querySelector('.radioinputsblock');
const inputs = block.querySelectorAll('input');
for (const input of inputs) {
	const label = input.closest('label');
	label.before(input);
}

А зачем?

рони · #3 (**permalink**) 18.02.2023, 18:29

firsmember,

document.addEventListener("DOMContentLoaded", function() {
            for (const label of document.querySelectorAll(".radioinputsblock label")) {
                const { control} = label;
                label.after(control)
            }
        })

firsmember · #4 (**permalink**) 18.02.2023, 18:31

Спасибо!)

firsmember · #5 (**permalink**) 18.02.2023, 18:38

Круто! Выглядит получше!)

voraa · #6 (**permalink**) 18.02.2023, 18:38

const block = document.querySelector('.radioinputsblock');
const inputs = block.querySelectorAll('input');
for (const input of inputs) {
	const label = input.closest('label');
	label.before(input);
	input.id = input.value;
}

рони · #7 (**permalink**) 18.02.2023, 18:42

firsmember,

document.addEventListener("DOMContentLoaded", function() {
            for (const label of document.querySelectorAll(".radioinputsblock label")) {
                const { firstElementChild : input} = label;
                 input.id = input.value;
                 label.before(input);
            }
        })

рони · #8 (**permalink**) 18.02.2023, 18:51

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

А это точно сработает?

для первоначального варианта с for и id да, без этого нет.

рони · #9 (**permalink**) 18.02.2023, 18:54

voraa,
вначале было input под label и были корректные id и for

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    label{
        border: 1px solid red;
    }

    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            for (const label of document.querySelectorAll(".radioinputsblock label")) {
                const { control } = label;
                label.after(control)
            }
        })
    </script>
</head>

<body>
    <div class="radioinputsblock">
        <label for="blabla1" class="radio label">
    <input type="radio" id="blabla1" name="progress" value="blabla1"  data-price-type="normal" data-price="5000" required="">
Я текст
  </label>
        <label for="blabla2" class="radio label">
    <input type="radio" id="blabla2" name="progress" value="blabla2"  data-price-type="normal" data-price="5000" required="">
Я текст
  </label>
    </div>
</body>

</html>

voraa · #10 (**permalink**) 18.02.2023, 18:58

И все равно не понимаю, зачем писать
const { firstElementChild : input} = label;
вместо
const input = label.firstElementChild;

Форум

Справочник

Discord чат

Курсы javascript