How to uncheck a radio button by clicking it again in vanilla js

I have a list of radio buttons and the obvious action is that the inputs checked value becomes true when it's clicked.

I have seen this link (Radio button uncheck on second click) and although jquery is basically javascript, the solution was a bit confusing and I was hoping for a more modern javascript solution.

I have seen suggestions about using checkboxes but I assume it won't work in my case as a checkbox would allow multiple inputs and that wouldn't work on ratings.

I would like to uncheck the radio button when I click again on it. The initial issue was that the first input could not be unchecked and I found this solution (Issue with star rating css) but then I realised that it's not just for the first one that I need this option.. it's for all inputs.. and the above link, it seems (I am not 100% sure), unchecks the first input button wherever I may click.. and that's not what I am looking for. The input state should be maintained if the user clicks anywhere on the document. But if the user feels that he needs to uncheck his current action, then he would try to click on the selected star/input again and I want the radio button to be unchecked at this point.

I tried to create the function in Javascript with the logic that if the checked status of the clicked button is true then change it to false but that's not logical as any click on any radio button (selected or not selected) would give the same result. I want to know how to know if the rating for that particular criteria had an input that was already checked and if so, uncheck it. I am completely lost at this point.

I have the code provided below.

HTML

Please add this to the head section if you are testing on localhost for the 'star' icon to appear in the code

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Here's the HTML

    <div class="rating">
      <input id="rating1" type="radio" name="rating" value="1" />
      <label for="rating1" class="material-icons">grade</label>
      <input id="rating2" type="radio" name="rating" value="2" />
      <label for="rating2" class="material-icons">grade</label>
      <input id="rating3" type="radio" name="rating" value="3" />
      <label for="rating3" class="material-icons">grade</label>
      <input id="rating4" type="radio" name="rating" value="4" />
      <label for="rating4" class="material-icons">grade</label>
      <input id="rating5" type="radio" name="rating" value="5" />
      <label for="rating5" class="material-icons">grade</label>
    </div>

Here's the CSS

input{
/*   display:none; */
}

label{
  color:orange;
  font-size:3rem;
}


.rating:not(:hover) input:indeterminate + label{
  color:grey
}

.rating:not(:hover) input:checked ~ input + label{
  color:grey;
}

.rating input:hover ~ input +label{
  color:grey;
}  



/* .rating:not(:hover) input:focus-visible + label{
  color:orange
} */

/* Reference : https://iamkate.com/code/star-rating-widget/ */

And here's JS

const rating = document.querySelector('.rating');

rating.addEventListener('change',function(){
  console.log('I have no idea what to do here!')
})

Solution

you should use event click bcuz change didn't invoke when radio has checked true

     // Array inputs
    const ratings = document.querySelectorAll('input[name=rating]');

    // Array false & true.
    const array = [];

    for(let i = 0; i < ratings.length; i++)
    {
      array[i] = false;
      // create event handler onClick
      ratings[i].addEventListener('click',function()
      {
          //if item has checked before
          if(array[i] == true)
          {
            ratings[i].checked = false;
            array[i] = false;
            return; // return or will set to ture value
          }
          // set to true.
          array[i] = true;
      });
    }

more here:https://jsfiddle.net/t2u5dgeb/45/