Функция сброса кнопки радио

Question

У меня есть 5 кнопок радио.

<ul id='answers_ul'> 
    <li> 
     <input class='crossAnswer' id='c_1' name='c_1' type='checkbox'> 
     <label for='c_1'></label> 
     <input class='alternative-letter' id='r_1' name='r_1' type='radio' /> 
     <div class='answers_letters'>A</div> 
     <label class='res1' for='r_1'></label> 
    </li> 
    <li> 
     <input class='crossAnswer' id='c_2' name='c_2' type='checkbox'> 
     <label for='c_2'></label> 
     <input class='alternative-letter' id='r_2' name='r_2' type='radio' /> 
     <div class='answers_letters'>B</div> 
     <label class='res2' for='r_2'></label> 
    </li> 
    <li> 
     <input class='crossAnswer' id='c_3' name='c_3' type='checkbox'> 
     <label for='c_3'></label> 
     <input class='alternative-letter' id='r_3' name='r_3' type='radio' /> 
     <div class='answers_letters'>C</div> 
     <label class='res3' for='r_3'></label> 
    </li> 
    <li> 
     <input class='crossAnswer' id='c_4' name='c_4' type='checkbox'> 
     <label for='c_4'></label> 
     <input class='alternative-letter' id='r_4' name='r_4' type='radio' /> 
     <div class='answers_letters'>D</div> 
     <label class='res4' for='r_4'></label> 
    </li> 
    <li> 
     <input class='crossAnswer' id='c_5' name='c_5' type='checkbox'> 
     <label for='c_5'></label> 
     <input class='alternative-letter' id='r_5' name='r_5' type='radio' /> 
     <div class='answers_letters'>E</div> 
     <label class='res5' for='r_5'></label> 
    </li> 
</ul> 

Особенность этой радиокнопок, является то, что, когда пользователь нажимает на любой из них, путь SVG является добавление, как переключатель «заполнение», но вместо того, чтобы предыдущий один остается, и новый один заполняется, имея 2 в то время ... и т. д. с 5.

Проблема заключается в том, что когда я нажимаю второй переключатель, предыдущий svg должен быть удален на другой путь SVG добавляется в новый один.

/* Deletes the previous radio svg path*/ 
function resetRadio(el) { 
    var actualRadioName = $('input[type="radio"][name="' + el.getAttribute('name') + '"]'); 
    [].slice.call(actualRadioName).forEach(function(el) { 
     var path = el.parentNode.querySelector('.radio-box > path'); 
     if (path) { 
      path.parentNode.removeChild(path); 
     } 
    }); 
} 


/* Button that deletes all five radio buttons svg paths*/ 
    jQuery('.clean_question').on('click', function(){ 
     selectsArr.forEach(function(obj,i) { 
      [].forEach.call(obj.inputs,function(el){ 
       if (el.getAttribute('type') === 'radio') 
        resetRadio(el); 
      }) 
     }); 
    }) 

Это выдержка из функции, которая генерирует путь SVG.

Любые советы будут полезны (:

Answer 1

Группа переключателей в HTML должны все иметь одинаковое значение для их атрибута name Это то, что создает взаимоисключающие функции Ваши кнопки все имеют разные названия и так.. вы можете выбрать, как многие из них, как вы хотите.

сделать уникально id «s и есть код JS найти кнопки этими идентификаторами, но имена должны быть одинаковыми.

Когда ты сделайте это, вы можете изменить и сократить ваш jQuery, который находит кнопки от:

var actualRadioName = $('input[type="radio"][name="' + el.getAttribute('name') + '"]'); 

к:

var actualRadioName = $("#" + el.id);