Javascript 当单选按钮从选中变为未选中时，如何执行操作？

我试图在Javascript中创建一个函数，当有人单击单选按钮时，该函数会更改单选按钮上的属性（这样我就可以检测选中了哪个单选按钮）。这里有一个解释我想做的更多一点。JSFIDLE中的代码唯一的问题是它在jQuery中，我不了解足够的jQuery，无法将其转换回其纯Javascript对应项。是我将jQuery转换为Javascript的尝试。我完全可以复制代码并使用它，但那样我就什么也学不到了

在过去的4个小时里，我一直在努力解决这个问题，非常感谢您的帮助

谢谢， 亚历克斯

InitRadio（'name'）；
函数InitRadio（名称）{
val=0；
$.each（$（':radio[name=“”+name+“]”），function（）{
$（this.val（val++）；
$（this.attr（'chk'，'0'）；
$（此）.on（“单击”），函数（事件）{
SetRadioButtonCKProperty（$（this）.val（），name）；
document.getElementById（'1'）。innerText=document.getElementById（'input1'）。getAttribute（'chk'）；
document.getElementById（'2'）。innerText=document.getElementById（'input2'）。getAttribute（'chk'）；
document.getElementById（'3'）。innerText=document.getElementById（'input3'）。getAttribute（'chk'）；
});
});
document.getElementById（'1'）。innerText=document.getElementById（'input1'）。getAttribute（'chk'）；
document.getElementById（'2'）。innerText=document.getElementById（'input2'）。getAttribute（'chk'）；
document.getElementById（'3'）。innerText=document.getElementById（'input3'）。getAttribute（'chk'）；
}
函数SetRadioButtonCKProperty（val，名称）{
$.each（$（':radio[name=“”+name+“]”），function（）{
if（$（this.val（）！=val）
$（this.attr（'chk'，'0'）；
否则{
if（$（this.attr（'chk'）=='0'）
$（this.attr（'chk'，'1'）；
}
});
}

p{
显示：内联；
}

如果您只想知道是否选中了单选按钮，则无需设置自定义属性。只需查看其

checked

属性。

如果您只想知道单选按钮是否已选中，则无需设置自定义属性。只要看看它的

checked

属性。

也许这就是你想要的。
你可以在家里试试

HTML:

---

也许这就是你想要的。
你可以在家里试试

HTML:

---

我的理解是，您正在部分完成将jQuery转换为javascript的过程，并且由于对jQuery缺乏了解，您在转换过程中遇到了困难

下面是注释掉的jQuery行，后面是它们最直接的Javascript等价物。请记住，一些jQuery函数有不同的转换，这取决于您如何使用它们（尽管您的代码都没有这个问题）。此外，由于转换和您自己的代码的问题，此代码可以从大量清理中受益。为了演示jQuery/Javascript的等效性，我避免了进行任何清理

InitRadio（'name'）；
函数InitRadio（名称）{
val=0；
//$.each（$（':radio[name=“”+name+“]”），function（）{
var radioButtons=[].slice.call（document.queryselectoral（'input[type=“radio”][name=“”+name+”））；
单选按钮.forEach（功能（元素，索引）{
//$（this.val（val++）；
element.value=val++；
//$（this.attr（'chk'，'0'）；
setAttribute（'chk'，'0'）；
//$（此）.on（“单击”），函数（事件）{
元素。addEventListener（'click'，函数（事件）{
//SetRadioButtonCKProperty（$（this）.val（），name）；
SetRadioButtonCKProperty（element.value，name）；
document.getElementById（'1'）。innerText=document.getElementById（'input1'）。getAttribute（'chk'）；
document.getElementById（'2'）。innerText=document.getElementById（'input2'）。getAttribute（'chk'）；
document.getElementById（'3'）。innerText=document.getElementById（'input3'）。getAttribute（'chk'）；
});
});
document.getElementById（'1'）。innerText=document.getElementById（'input1'）。getAttribute（'chk'）；
document.getElementById（'2'）。innerText=document.getElementById（'input2'）。getAttribute（'chk'）；
document.getElementById（'3'）。innerText=document.getElementById（'input3'）。getAttribute（'chk'）；
}
函数SetRadioButtonCKProperty（val，名称）{
//$.each（$（':radio[name=“”+name+“]”），function（）{
var radioButtons=[].slice.call（document.queryselectoral（'input[type=“radio”][name=“”+name+”））；
单选按钮.forEach（功能（元素，索引）{
//if（$（this.val（）！=val）
if（element.value！=val）
//$（this.attr（'chk'，'0'）；
setAttribute（'chk'，'0'）；
否则{
//if（$（this.attr（'chk'）=='0'）
if（element.getAttribute（'chk'）='0'）
//$（this.attr（'chk'，'1'）；
setAttribute（'chk'，'1'）；
}
});
}

p{
显示：内联；
}

我的理解是，您部分完成了将jQuery转换为javascript的过程，由于对jQuery缺乏了解，您在转换过程中遇到了困难

下面是注释掉的jQuery行，后面是它们最直接的Javascript等价物。请记住，一些jQuery函数有不同的转换，这取决于您如何使用它们（尽管您的代码都没有这个问题）。此外，由于转换和您自己的代码的问题，此代码可能会从大量清理中受益。为了演示jQuery/Javascript的等效性，我避免了进行任何清理

InitRadio（'name'）；
函数InitRadio（名称）{
val=0；
//$.each（$（':radio[name=“”+name+“]”），function（）{
var radioButtons=[].slice.call（document.queryselectoral（'input[type=“radio”][name=“”+name+”））；
单选按钮.forEach（功能（元素，索引）{
//$（this.val（val++）；
element.value=val++；
<div class="RadioList"> 
  <input type="radio" class="radioBtn" value="r1" name="radio"> R1
  <input type="radio" class="radioBtn" value="r2" name="radio"> R2
  <input type="radio" class="radioBtn" value="r3" name="radio"> R3
  <input type="radio" class="radioBtn" value="r4" name="radio"> R4 
</div> 
<div class="statusRadio">
  <p>Checked Radio value: <b id="statusChecked">none</b></p>
</div>

$(document).ready(function() { 
  $(document).on('click', '.radioBtn', function() {
    var valRadio = this.value;
    $('#statusChecked').html(valRadio);
  });
});