Добавить/удалить какой-либо текст в div после того, как radioobox отмечен/снят флажок

Question

У меня есть несколько радио и флажков для отображения некоторых div. Мне нужно отобразить отдельный div, который показывает текст (например, имя автора) после нажатия на радиобокс, а также добавляет текст в предыдущий текст после нажатия на флажки. Можно ли создать что-то подобное с помощью css/javascript? Любой совет ? Я думаю, что мне нужно добавить/удалить классы с «содержанием:« bla bla »в css.

Answer 1

Чистый раствор CSS

Для изменения значения (или быть конкретным, то: после содержания) вы не нужна JavaScript!
Вам нужен только :checked и наоборот :not(:checked). С помощью label data-attributes вы можете передать текст для каждого состояния и кнопки.

input[type="radio"]:not(:checked)+label:after{ 
 
\t content:attr(data-notchecked); 
 
} 
 
input[type="radio"]:checked+label:after{ 
 
\t content:attr(data-checked); 
 
}

<input type="radio" name="radio" id="radio1"><label data-checked="checked Radio 1" data-notchecked="not checked Radio 1" for="radio1"></label><br> 
 
<input type="radio" name="radio" id="radio2"><label data-checked="checked Radio 2" data-notchecked="not checked Radio 2" for="radio2"></label>

Answer 2

Да, вы можете сделать с чистыми функциями JavaScript:

// assign function to onclick property of checkbox 
document.getElementById('TestCheckbox').onclick = function() { 
    // access properties using this keyword 
    if (this.checked) { 
     // if checked ... 
     alert(this.value); 
    } else { 
     // if not checked ... 
    } 
}; 

Но я думаю, JQuery или AngularJS дать вам лучше и более простые решения для этого:

Пример для JQuery:

if(document.getElementById('TestCheckbox').checked) 
    $("#TestDiv").show(); // Show||hide div or anything else 
    else 
    $("#TestDiv").hide(); // Show||hide div or anything else 

вы можете использовать класс вместо идентификаторов, чтобы уменьшить свои коды. Также я согласен с методом Луки Юнга.