我正在做一个多级单选按钮。逻辑隐藏/显示第二级单选按钮。然后选择/选中基于选定的第一级单选按钮显示的第一个元素输入。但由于某种原因，当我选择第二级单选按钮时，当我返回到上一个选定的单选按钮时，我选择了第一级单选按钮中的另一个按钮。出现了值为空的错误。我有点困惑，因为在html中它已经被选中，但在UI中它没有。我注意到这个错误的过程：选择A2-〉选择B3-〉选择A3-〉选择A2下面是我的代码：
(https://jsfiddle.net/jakedsi/0yhnujez/)
5tmbdcev1#
这可以简化。这是不简单的，由于您的HTML，但我简化了标签了https://jsfiddle.net/mplungjan/dc9xyhLj/
const filterForm = document.querySelector('form.fltr'); filterForm.addEventListener('click', (e) => { const tgt = e.target; if (!tgt.matches('[type=radio]')) return; const parent = tgt.closest('div'); parent.querySelectorAll('input') .forEach(rad => rad.closest('label').classList.toggle('checked', rad.checked)); if (!parent.matches('.ggrp')) return; // not a ggrp document.querySelectorAll('.dgrp div').forEach(div => { div.hidden = !div.matches(`.${tgt.id}`); if (!div.hidden) div.querySelector('input').click(); }); });
.fltr label.checked { border-color: #44D62C; color: #44D62C; }
<form class="fltr"> <fieldset> <legend>Graphics</legend> <div style="display: flex;" class="ggrp"> <label class="checked"><input id="A1" name="gfx" type="radio" value="A1" checked /> A1</label> <label><input id="A2" name="gfx" type="radio" value="A2" /> A2</label> <label><input id="A3" name="gfx" type="radio" value="A3" /> A3</label> </div> </fieldset> <fieldset> <legend>Display</legend> <div style="display: flex;" class="dgrp"> <div class="A1"><label class="checked"><input id="B1" name="dsp" type="radio" value="B1" checked /> B1</label> </div> <div class="A1 A2"><label><input id="B2" name="dsp" type="radio" value="B2" /> B2</label> </div> <div class="A2"><label><input id="B3" name="dsp" type="radio" value="B3" /> B3</label> </div> <div class="A3"><label><input id="B4" name="dsp" type="radio" value="B4" /> B4</label></div> </div> </fieldset> </form>
1条答案
按热度按时间5tmbdcev1#
这可以简化。
这是不简单的，由于您的HTML，但我简化了标签了
https://jsfiddle.net/mplungjan/dc9xyhLj/