Estoy haciendo una aplicación de prueba en línea en la que hay preguntas de opción múltiple. Entonces, quiero hacer si el usuario ha seleccionado una opción por error, y ahora quiere cambiar su opción y seleccionar otra opción. Entonces, ¿cómo debo hacer eso?
A continuación se muestra mi HTML para los botones de opción:
<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>A continuación se muestra mi función de JavaScript para manejar la opción en la que el usuario hizo clic:
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); }La función anterior está almacenando opciones de usuario en una matriz. Entonces, si un usuario ha seleccionado la Opción A y nuevamente seleccionó la Opción A, entonces en una matriz se agregan dos opciones similares y si el usuario ha cambiado la opción, esa opción también se agrega en la matriz. Entonces, por esto, su puntaje total y resultado pueden verse afectados. Quiero que si el usuario ha cambiado su opción, se elimine la opción anterior y se agregue una nueva opción en la matriz.
Este es un sistema de administración de estado muy tosco: es lo suficientemente flexible como para definir sus propias funciones al actualizar la matriz de opciones selectedOption : puede insertar cualquier cantidad de elementos allí, hacerlos únicos o tener una función que realmente elimine el último seleccionado y agregue el nuevo una. También puede manejar cualquier número de opciones.
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>