Javascript -在未选中Radio时更改元素内容

Question

当未检查无线电输入时，如何更改内容？当内容发生变化时，是否有一种方式来激活过渡？

​

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>

​

Answer 1

解释1

• radCheck()传递事件对象
  • rads是一个实时的HTMLCollection
    • event.currentTarget引用<form>
    • .elements是所有窗体控件的集合。
    • .checkfield将集合缩小到所有名为checkfield的窗体控件。

​

​

• for...of循环遍历rads - r是当前无线电。

- Ternary:  _**if**_ _current radio is_ _**`.checked`**_:  status = "Done" _**else**__: status = "Copy"_

将.textContent设置为状态值(即“复制”或“已完成”)

​

这是为每一对收音机和标签做的。

解释2

• document.forms[0] -第一个(并且只在本例中) <form>
• .onchange -将<form>注册到更改事件
• radCheck -调用事件处理程序 /*参见解释1 */ const radCheck = event => { const = event.currentTarget.elements.checkfield；for ( rads) { let radCheck= r.checked？“已完成”：“复制”；r.nextElementSibling.textContent =状态；} /*参见说明2 */ document.forms.onchange = radCheck；

Answer 2

是像这样吗？

​

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

const labels = document.querySelectorAll("label"); // added

function statusChange(target) {
	label = document.getElementById(target);
        labels.forEach(function(p){ // added
          p.innerHTML = "copy"; // added
        }); // added
	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>

​

Answer 3

这一策略与@dgknca's answer中的策略非常相似，但从最初的问题中得到了一些概括和澄清。

​

// Add the event listener to each input
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', onRadioChange);
})

function onRadioChange(e) {
  // Set each label to the inital value
  document.querySelectorAll('input').forEach(input => {
    if (input !== e.target) input.labels[0].innerHTML = 'copy'
  })
  
  // Set the selected input's label to the checked value
  e.target.labels[0].innerHTML = 'done'
}

<form>
  <input id="input-1" type="radio" name="checkfield" />
  <label for="input-1">copy</label>
  
  <input id="input-2" type="radio" name="checkfield" />
  <label for="input-2">copy</label>

  <input id="input-3" type="radio" name="checkfield" />
  <label for="input-3">copy</label>
</form>

​