Проблема с .checked

Question

Я помогаю кому-то исправить их простой JavaScript, выделенный при проверке

ДЕМО

Если вы нажмете да или нет, вы увидите, что он ломается и делаетвыделена непроверенная строка.

Я знаю, что могу переписать ее в jQuery, но я бы ДЕЙСТВИТЕЛЬНО хотел бы знать, что делает ее неудачной

Спасибо

Answer 1

Это потому, что вы добавляете имя класса каждый раз. Так что если вы переключаетесь между да / нет 5 раз, у item3 будет имя класса radio-item myclass myclass myclass myclass myclass. Таким образом, в вашем replace вы должны убедиться, что он глобален (заменяя каждое вхождение строки поиска)

редактирование:

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

if (inputArray[i].checked) {
    inputArray[i].parentNode.className += " myclass";
}    

Answer 2

Вот некоторые библиотечные функции, которые я написал некоторое время назад:

function trim(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

function hasClassName(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);

    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

function addClassName(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (!hasClassName(el, cName)) {
        el.className = trim(el.className + ' ' + cName);
    }
}

function removeClassName(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (hasClassName(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = trim(el.className.replace(re, ''));
    }
}