javascript - 刷新后如何将类添加到页面上选中的单选按钮的父标签
问题描述
每个单选按钮都在我的 html 标记中的标签内。我无法更改标记。我使用以下 JavaScript 代码添加事件侦听器。但是当我刷新页面时,仍然选中单选按钮,但父元素不再具有该类,因为当我再次单击它时,事件侦听器将再次将该类添加到父标签。一旦页面重新加载以再次添加类,如何选择所有选中的单选按钮的父级。
let form = document.querySelector( "form" );
form.addEventListener( "click", ( evt ) => {
let trg = evt.target,
trg_par = trg.parentElement;
if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) {
let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' );
if ( prior ) {
prior.parentElement.classList.remove( "checked" );
}
trg_par.classList.add( "checked" );
}
}, false );
解决方案
由于您尚未共享完整代码,因此我以自己的方式复制了 HTML。
您可以在应用程序中打开注释代码。
标签可以根据您的 HTML 进行修改
<!DOCTYPE html>
<html>
<body>
<label>
Radio 1: <input type="radio" name="rdo" value="1" class="rdo"/>
</label>
<label>
Radio 2: <input type="radio" name="rdo" checked="checked" value="2" class="rdo"/>
</label>
<script>
radio = document.getElementsByTagName("input");
for (var trv = 0; trv < radio.length; trv++) {
if (radio[trv].checked) {
let trg = radio[trv],
trg_par = trg.parentElement;
if (trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label") {
console.log(trg);
/*let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' );
if ( prior ) {
prior.parentElement.classList.remove( "checked" );
}*/
trg_par.classList.add("checked");
}
}
}
</script>
</body>
</html>
推荐阅读
- python - 如何使用 ruamel.yaml 正确输出字符串
- node.js - 如何用 typescript 续集 findAll 和 include
- python - 是否有熊猫功能可以每天从日期时间列中获取特定时间戳?
- javascript - 使用 useState 更新深层嵌套状态无法正常工作
- php - 在处理 MySql 数据库事务时使用 PHP Throwable 是最佳实践吗?
- visual-studio - 为什么在使用 Docker 时出现错误消息“无效的参考格式”?
- javascript - 如何在 ReactJs 中用矩形框扭曲某些组件?
- python - 可导航的 Python 图表
- r - R+Shiny+DT:自动右对齐数字列
- c - 超出限制时输出字符串