Javascript - 未选中单选输入时更改元素内容

标签 javascript html css

如何在未选中 radio 输入时更改内容?有没有办法在内容更改时为过渡设置动画?

function radioCheck(target) {
	radioElem = document.getElementById(target);
}

function statusChange(target) {
	label = document.getElementById(target);
	if (radioElem.checked) {
		label.innerHTML = "done";
	}
	else {
		label.innerHTML = "copy";
	}
}
<form>
    <input type="radio" name="checkfield" id="radio-1"  onchange="radioCheck('radio-1');statusChange('label-1');"/><label for="radio-1" id="label-1">copy</label>
     <input type="radio" name="checkfield" id="radio-2"  onchange="radioCheck('radio-2');statusChange('label-2')"/><label for="radio-2" id="label-2">copy</label>
     <input type="radio" name="checkfield" id="radio-3"  onclick="radioCheck('radio-3');statusChange('label-3')"/><label for="radio-3" id="label-3">copy</label>
</form>

最佳答案

解释一

  • radCheck() 传递事件对象
    • rads是一个 Live HTMLCollection
      • event.currentTarget 引用 <form>
      • .elements 是所有表单控件的集合
      • .checkfield 将集合范围缩小到所有形式 名为 checkfield 的控件
  • for...of 循环遍历 rads - r是当前 radio

    • 三元: if当前 radio 是 .checked :状态=“完成” else: status = "复制"

    • 查找当前电台 .nextElementSibling (即 <label> 在当前 radio 之后)
      设置<label> <强> .textContent 状态值(即“复制”或“完成”)

这是为每对 radio 和标签完成的


解释2

  • document.forms[0] - 第一个(且仅在本例中)<form>

  • .onchange - 注册 <form>到更改事件

  • radCheck - 调用事件处理程序

    /*
    See Explanation 1
    */
    
    const radCheck = event => {
      const rads = event.currentTarget.elements.checkfield;
      for (let r of rads) {
        let status = r.checked ? "Done" : "Copy";
        r.nextElementSibling.textContent = status;
      }
    }
    
    /*
    See Explanation 2
    */
    
    document.forms[0].onchange = radCheck;
    <form>
      <input id="radio-1" name="checkfield" type="radio">
      <label for="radio-1">Copy</label>
      <input id="radio-2" name="checkfield" type="radio">
      <label for="radio-2">Copy</label>
      <input id="radio-3" name="checkfield" type="radio">
      <label for="radio-3">Copy</label>
    </form>

关于Javascript - 未选中单选输入时更改元素内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55581897/

相关文章:

html - 如何使边框底部更靠近文本?

html - `id` 属性需要在 iframe 中是唯一的吗?

php - 带有我模板的页眉/侧边栏/页脚的 Wordpress 空白页

javascript - 如何使 Bootstrap Carousel 保持固定在导航栏下方?

javascript - 当 parent 失去悬停时保持 ul 可见(如果可能的话纯 css)

仅在向上滚动时出现的返回顶部链接的 Javascript 语法帮助

css - 如何强制一个div到下一行

javascript - 本地存储阵列

javascript - 使用 setTimeout 模拟并行操作有什么本质上的错误吗?

jquery - 如何使用 jQuery 从另一个 HTML 文件中获取 "slide in"内容