Hinzufügen/Entfernen von Text zu Div nach Radiobox ist aktiviert/deaktiviert

Question

Ich habe mehrere Radio und Kontrollkästchen zum Anzeigen von einigen divs. Ich muss separate div anzeigen, die Text anzeigen (z. B. Name des Autors) nach dem Klicken auf Radiobox und auch etwas Text zum vorherigen Text nach dem Anklicken der Checkboxen hinzufügen. Ist es möglich mit Hilfe von css/javascript so etwas zu erstellen? Irgendein Rat ? Ich denke, dass ich Klassen mit "Inhalt:" bla bla "" in css hinzufügen/entfernen muss.

Answer 1

reine CSS-Lösung

Um den Wert zu ändern (oder um genau zu sein, die: nach Inhalt) Sie tun nicht jede JavaScript brauchen!
Sie benötigen nur die :checked und das Gegenteil :not(:checked). Über die label data-attributes können Sie den Text für jeden Zustand und Knopf verarbeiten.

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

Ja, können Sie mit reinen JavaScript-Funktionen tun:

// 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 ... 
    } 
}; 

Aber ich denke, JQuery oder AngularJS geben Ihnen bessere und einfachere Lösungen:

Beispiel für JQuery:

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

Sie können Klassen anstelle von IDs verwenden, um Ihre Codes zu reduzieren. Auch stimme ich mit Luca Jung Methode überein.