How to make radio button unchecked if click on another option in quiz application using JavaScript or jQuery?

Question

I am making an online quiz application in which multiple choice questions are there. So I want to make if user has selected an option mistakenly, and now he/she want to change his/her option and selected another option. So how should I do that?

Below is my HTML for radio buttons:

<input class="form-check-input ans-radio" type="radio" name="option"  id="exampleRadios1" value="1" onclick="selectedOpt();">
<label class="form-check-label ans-label" for="exampleRadios1" id="label1">Option A</label>
<input class="form-check-input" type="radio" name="option"  id="exampleRadios2" value="2" onclick="selectedOpt();">
<label class="form-check-label" for="exampleRadios2" id="label2">Option B</label>
<input class="form-check-input" type="radio" name="option"  id="exampleRadios3" value="3" onclick="selectedOpt();">
<label class="form-check-label" for="exampleRadios3" id="label3">Option C</label>
<input class="form-check-input" type="radio" name="option" id="exampleRadios4" value="4" onclick="selectedOpt();">
<label class="form-check-label" for="exampleRadios4" id="label4">Option D</label>

Below is my JavaScript function to handle user clicked option:

  function selectedOpt(){
      var selectedOption = [], selectedQuestion = [];
      var useroptions = "", questionid = "";
      $('[name="option"]').each(function(i,e){
         if($(e).is(':checked')){
            selectedOption.push(e.value);
         }
      });
      document.querySelectorAll('input[name="question"]').forEach(function(elem){
          selectedQuestion.push(elem.value);
      });
     useroptions = selectedOption.join();
     questionid = selectedQuestion.join();
     console.log("user options || "+useroptions);
     console.log("question id || "+questionid);
   }

Above function is storing user options in an array. So if a user has selected Option A and again selected Option A then in an array two similiar options get added and if user has changed option then that option also get added in Array. So by this, his/her total score and result may get affected. I want that if user has changed his option then previous option should be removed and new option should get added in array.

Answer 1

This is a very crude state management system: it's flexible enough to define your own functions when updating the selectedOption array: you can push any number of items in there, make them unique or have a function that actually removes the last selected and adds the new one. It can also handle any number of options.

const rBtns = document.querySelectorAll(".form-check-input")

const initState = () => {
  let _selectedOption = []
  return {
    get selectedOption() {
      return _selectedOption
    },
    set selectedOption(val) {
      _selectedOption = val
    },
  }
}

const initActions = (state) => ({
  addToSelected(payload) {
    state.selectedOption = [...state.selectedOption, payload]
  },
  ensureLatest(fn) {
    return (payload) => {
      // ensures that the last item in the selectedOption is always
      // the latest option selected
      state.selectedOption = state.selectedOption.filter(e => e !== payload)
      fn(payload)
    }
  },
  addToSelectedUniq(payload) {
    this.ensureLatest(this.addToSelected)(payload)
    state.selectedOption = [...new Set(state.selectedOption)]
  },
  removeLastSelectedOption() {
    state.selectedOption.pop()
  }
})

const state = initState()
const actions = initActions(state)

// this function ensures that the previous choice is removed if
// a new one is picked; also ensures that the same value cannot
// be in the array twice (actually not needed, if the last is
// always removed)
const onSelect = (e) => {
  actions.removeLastSelectedOption()
  actions.addToSelectedUniq(e.target.value)
  console.log(state)
}

rBtns.forEach(rBtn => {
  rBtn.addEventListener('change', onSelect)
})

<input class="form-check-input ans-radio" type="radio" name="option" id="exampleRadios1" value="1">
<label class="form-check-label ans-label" for="exampleRadios1" id="label1">Option A</label>
<input class="form-check-input" type="radio" name="option" id="exampleRadios2" value="2">
<label class="form-check-label" for="exampleRadios2" id="label2">Option B</label>
<input class="form-check-input" type="radio" name="option" id="exampleRadios3" value="3">
<label class="form-check-label" for="exampleRadios3" id="label3">Option C</label>
<input class="form-check-input" type="radio" name="option" id="exampleRadios4" value="4">
<label class="form-check-label" for="exampleRadios4" id="label4">Option D</label>