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

喜欢吗？

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 2

说明1

radCheck() 传递事件对象
- rads是一个实时HTML集合
  - event.currentTarget 引用了<form>
  - .elements 是所有表单控件的集合
  - .checkfield 将收集范围缩小到所有形式名为checkfield的控件
for...of 循环遍历rads-r是当前电台
- 三元组：如果当前广播是 .checked ：status =“ Done” 其他 ：状态=“复制”
- 查找当前广播 .nextElementSibling （即当前广播之后的<label>）
  将<label> .textContent 设置为状态值（即“复制”或“完成”）

这是为每对收音机和标签完成的

说明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>

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>

Javascript-取消选中无线电输入时更改元素内容

3 个答案: