Связать вместе input'ы, имеющие разные атрибуты name
Есть код следующего вида:
<div class="group-options">
<div class="group-options__item">
<input type="radio" name="group-1" data-prop="prop1">
<input type="radio" name="group-1" data-prop="prop1">
<input type="radio" name="group-1" data-prop="prop1">
<input type="radio" name="group-1" data-prop="prop1">
</div>
<div class="group-options__item">
<input type="radio" name="group-2" data-prop="prop2">
<input type="radio" name="group-2" data-prop="prop2">
<input type="radio" name="group-2" data-prop="prop2">
</div>
<div class="group-options__item">
<input type="radio" name="group-3" data-prop="prop3">
<input type="radio" name="group-3" data-prop="prop3">
</div>
</div>
<div class="group-options">
<div class="group-options__item">
<input type="radio" name="group-4" data-prop="prop4">
<input type="radio" name="group-4" data-prop="prop4">
</div>
<div class="group-options__item">
<input type="radio" name="group-5" data-prop="prop5">
<input type="radio" name="group-5" data-prop="prop5">
<input type="radio" name="group-5" data-prop="prop5">
</div>
<div class="group-options__item">
<input type="radio" name="group-6" data-prop="prop6">
<input type="radio" name="group-6" data-prop="prop6">
</div>
</div>
У нас есть несколько блоков group-options, содержащих группы радиобаттонов group-options__item. У каждого радиобаттона есть дата атрибут data-prop, который одинаковый у радиобаттонов, принадлежащих одному group-options__item и соответственно атрибут name у них тоже одинаковый, если они принадлежат одному group-options__item.
Вопрос такой, можно ли как-то после загрузки страницы, у всех радиобаттонов, принадлежащих к одной группе group-options, брать значение data-prop у любого радиобаттона в этом блоке и применять его ко всем радиобаттонам в одном group-options, чтобы по итогу было вот так?
<div class="group-options">
<div class="group-options__item">
<input type="radio" name="group-4" data-prop="prop4">
<input type="radio" name="group-4" data-prop="prop4">
</div>
<div class="group-options__item">
<input type="radio" name="group-5" data-prop="prop4">
<input type="radio" name="group-5" data-prop="prop4">
<input type="radio" name="group-5" data-prop="prop4">
</div>
<div class="group-options__item">
<input type="radio" name="group-6" data-prop="prop4">
<input type="radio" name="group-6" data-prop="prop4">
</div>
</div>
И второй вопрос, можно ли сделать так, чтобы если выбран какой то радиобаттон в group-options, то остальные радиобаттоны, находящихся в разных group-options__item принадлежащих одному group-options становились не выбранными. То есть сейчас из-за разный атрибутов name в каждом group-options__item есть по выбранному радиобаттону, даже если они все и находятся в одном group-options, а нужно сделать видимость того, что у них у всех одинаковый атрибут name внутри группы group-options и мы можем чекнуть только один радиобаттон в этой группе.
пробовал использовать вот такое
const group = (() => {
const groups = element.querySelectorAll('.group-options');
groups.forEach((element) => {
let wrapperElem = element.querySelectorAll('.group-options__item');
wrapperElem.forEach((el) => {
let elements = el.querySelectorAll('input[type="radio"]'),
prop = el.querySelectorAll('input[type="radio"]')[0].dataset.prop;
elements.forEach((el) => {
el.setAttribute('data-prop', prop);
});
});
});
})();
пока не выходит ничего
Ответы (2 шт):
const group = (() => {
const groups = document.querySelectorAll('.group-options');
groups.forEach(group => {
const prop = group.querySelector('input[type="radio"]').dataset.prop;
// or const prop = group.querySelector('input[type="radio"]').getAttribute('data-prop');
let inputs = group.querySelectorAll('input[type="radio"]');
inputs.forEach(input => input.dataset.prop = prop);
// or inputs.forEach(input => input.dataset.setAttribute('data-prop', prop);
});
})();
[...document.querySelectorAll('.group-options')].forEach(function(group) {
let sDataProp = group.querySelector('[data-prop]').dataset.prop;
let aItems = [...group.querySelectorAll('[data-prop]')];
aItems.forEach(function(item) {
item.dataset.prop = sDataProp;
});
group.addEventListener('change', function(ev) {
aItems.forEach(function(item) {
if (item != ev.target) {
item.checked = false;
}
});
});
});.group-options { box-shadow: 0 0 5px red; } .group-options__item { box-shadow: 0 0 5px blue; } input { margin: 5px 55px; } input::after { content: attr(name) '/' attr(data-prop); position: absolute; margin-left: 17px; }<div class="group-options">
<div class="group-options__item">
<input type="radio" name="group-1" data-prop="prop1">
<input type="radio" name="group-1" data-prop="prop1">
<input type="radio" name="group-1" data-prop="prop1">
<input type="radio" name="group-1" data-prop="prop1">
</div>
<div class="group-options__item">
<input type="radio" name="group-2" data-prop="prop2">
<input type="radio" name="group-2" data-prop="prop2">
<input type="radio" name="group-2" data-prop="prop2">
</div>
<div class="group-options__item">
<input type="radio" name="group-3" data-prop="prop3">
<input type="radio" name="group-3" data-prop="prop3">
</div>
</div>
<div class="group-options">
<div class="group-options__item">
<input type="radio" name="group-4" data-prop="prop4">
<input type="radio" name="group-4" data-prop="prop4">
</div>
<div class="group-options__item">
<input type="radio" name="group-5" data-prop="prop5">
<input type="radio" name="group-5" data-prop="prop5">
<input type="radio" name="group-5" data-prop="prop5">
</div>
<div class="group-options__item">
<input type="radio" name="group-6" data-prop="prop6">
<input type="radio" name="group-6" data-prop="prop6">
</div>
</div>