ラジオボックスのチェック/チェックを外した後、divにテキストを追加/削除する

Question

いくつかのdivを表示するためのラジオとチェックボックスがいくつかあります。ラジオボックスをクリックした後にテキストを表示する別のdiv（著者名など）を表示し、チェックボックスをクリックして前のテキストにテキストを追加する必要があります。 css/javascriptの助けを借りてこれを作成することは可能ですか？何かアドバイス ？私は、CSSで "content：" bla bla ""というクラスを追加/削除する必要があると思います。

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 

あなたのコードを減らすために、クラスの代わりにIDを使用することができます。 またLuca Jungの方法に同意します。