How to do something when radio button is going from checked to unchecked?

Question

I am trying to create a function in Javascript that changes an attribute on a radio button (This is so that I can detect what radio button is checked) when someone clicks off/on it. Here is a jsFiddle explaining a little more of what I am looking to do. The only problem with the code in the jsFiddle is that it is in jQuery and I do not understand enough jQuery to convert it back to its pure Javascript counterpart. Here is my attempt to convert jQuery to Javascript. I could totally just copy the code and just use it but then I would not be learning anything.

I have been trying to figure this out for the last 4 ish hours and would really appreciate any help.

Thanks, Alex

 InitRadio('name'); function InitRadio(name) { val = 0; $.each($(':radio[name="' + name + '"]'), function() { $(this).val(val++); $(this).attr('chk', '0'); $(this).on("click", function(event) { SetRadioButtonChkProperty($(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'); } function SetRadioButtonChkProperty(val, name) { $.each($(':radio[name="' + name + '"]'), function() { if ($(this).val() != val) $(this).attr('chk', '0'); else { if ($(this).attr('chk') == '0') $(this).attr('chk', '1'); } }); } 

 p { display: inline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <input type='radio' class='radio-button' name='name' id="input1"> <p id="1"></p> <input type='radio' class='radio-button' name='name' id="input2"> <p id="2"></p> <input type='radio' class='radio-button' name='name' id="input3"> <p id="3"></p> 

Answer 1

Maybe this is what you want.
You can try it out in this Fiddle

HTML:

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

jQuery:

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

Answer 2

My understanding is that you're partially through converting jQuery to javascript and you're having difficulty with the conversion due to lack of understanding about jQuery.

Below is my conversion with jQuery lines commented out and followed by their most direct Javascript equivalent. Keep in mind that some jQuery functions have different conversions depending on how you use them (though none of your code has this issue). Also, this code could benefit from a lot of cleanup both due to the conversion and due to issues with your own code. I've avoided doing any cleanup in favor of demonstrating the jQuery/Javascript equivalency.

 InitRadio('name'); function InitRadio(name) { val = 0; //$.each($(':radio[name="' + name + '"]'), function() { var radioButtons = [].slice.call(document.querySelectorAll('input[type="radio"][name="'+name+'"]')); radioButtons.forEach(function(element,index){ //$(this).val(val++); element.value = val++; //$(this).attr('chk', '0'); element.setAttribute('chk','0'); //$(this).on("click", function(event) { element.addEventListener('click',function(event){ //SetRadioButtonChkProperty($(this).val(), name); SetRadioButtonChkProperty(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'); } function SetRadioButtonChkProperty(val, name) { //$.each($(':radio[name="' + name + '"]'), function() { var radioButtons = [].slice.call(document.querySelectorAll('input[type="radio"][name="'+name+'"]')); radioButtons.forEach(function(element,index){ //if ($(this).val() != val) if (element.value != val) //$(this).attr('chk', '0'); element.setAttribute('chk','0'); else { //if ($(this).attr('chk') == '0') if (element.getAttribute('chk') == '0') //$(this).attr('chk', '1'); element.setAttribute('chk','1'); } }); } 

 p { display: inline; } 

 <input type='radio' class='radio-button' name='name' id="input1"> <p id="1"></p> <input type='radio' class='radio-button' name='name' id="input2"> <p id="2"></p> <input type='radio' class='radio-button' name='name' id="input3"> <p id="3"></p> 

Answer 3

If you just want to know whether the radio button is checked, there's no need to set a custom attribute. Just look at its checked property.