こんにちは私はラジオボタンのラベルに色を付けようとしています checked
最初のラジオボタンでのみ機能する理由がわかりません。 Mon
私は月をチェックしていた場合、それは赤いなるが、私は確認したときにTue、Mon黒くなりますがTue、その理由である赤の代わりに黒のですか？
<ul>
<li><input type="radio" id="day" name="day" value="Mon" onclick="myFunction()"></li>
<label id="daylab" for="day">Mon</label>
<li><input type="radio" id="day" name="day" value="Tue" onclick="myFunction()"></li>
<label id="daylab" for="day">Tue</label>
function myFunction() {
var checkBox = document.getElementById("day");
if (checkBox.checked == true){
document.getElementById("daylab").style.color = "red";
} else {
document.getElementById("daylab").style.color = "black";
}
}
</script>
IDはHTMLで一意であるため、マークアップが無効になり、ロジックが正しく機能しなくなります。
IDではなく名前を設定して作業してみてください。
これは、兄弟に特定の色を設定するための代替手段です label
ulを見つけて、クラスを削除しactiveます。liを見つけて、クラスactiveを兄弟に追加しlabelます。Array.prototype.forEach.call(document.querySelectorAll('[name="day"]'), function(elem) {
elem.addEventListener('change', myFunction);
});
function myFunction() {
Array.prototype.forEach.call(this.closest('ul').querySelectorAll('.active'), function(activeElem) {
activeElem.classList.remove('active');
});
this.closest('li').querySelector('label').classList.add('active');
}.active {
color: lightgreen
}<ul>
<li>
<label for="day">Mon</label>
<input type="radio" name="day" value="Mon">
</li>
<li>
<label for="day">Tue</label>
<input type="radio" name="day" value="Tue">
</li>
</ul>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加