Вынести все input под label
Доброго вечера многоуважаемые!
Я к вам с вопросом.. Подскажите пожалуйста, имею:
<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> Заранее большое вам спасибо ! :thanks: |
Что то типа такого
const block = document.querySelector('.radioinputsblock');
const inputs = block.querySelectorAll('input');
for (const input of inputs) {
const label = input.closest('label');
label.before(input);
}
А зачем? |
firsmember,
document.addEventListener("DOMContentLoaded", function() {
for (const label of document.querySelectorAll(".radioinputsblock label")) {
const { control} = label;
label.after(control)
}
})
|
Спасибо!)
|
Круто! Выглядит получше!)
|
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;
}
|
firsmember,
document.addEventListener("DOMContentLoaded", function() {
for (const label of document.querySelectorAll(".radioinputsblock label")) {
const { firstElementChild : input} = label;
input.id = input.value;
label.before(input);
}
})
|
Цитата:
|
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>
|
И все равно не понимаю, зачем писать
const { firstElementChild : input} = label; вместо const input = label.firstElementChild; :-? |
| Часовой пояс GMT +3, время: 21:28. |