質問です。
ボタンを押したときの動作についての疑問。
nextSiblingﾌﾟﾛﾊﾟﾃｨは具体的に選択したﾉｰﾄﾞのどこから見て、ﾉｰﾄﾞのどこを戻り値にしているのか。
HTMlで作った、
チェックボックスにチェックを入れると、以下の全てのチェックボックスにチェックが付き、
チェックを入れるとチェックボックス横の文字列も伴って変わるテスト構文をしました。
結果的にはうまくいったのですが、なぜこの構文でうまくいくのか不明です。
最初に載せたjs構文が自分の思うようにうまくいった時の構文ですが、
途中にある、
「checkall.nextSibling.textContent = "チェックを外す"」
と、
「checkall.nextSibling.textXContent = "すべてをチェック"」
部分にtextContentが無いとなぜチェックを付けたり外したりした時にチェックボックスが付いてこないのか。
"hoge"idを取得してtextContentプロパティに文字列を代入しても同じ結果にならないのはなぜか？
が全く不明です。
なぜnextSiblingにtextContentを付けないとチェックボックスはついてこないのかを教えてください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<mata charset="utf-8">
<title>タグ属性によるイベントハンドラ登録サンプル</title>
</head>
<body>
<p>
<label id="hoge"><input type="checkbox" id="checkall" name="checkall" value="1" onclick="onCheckallChanged()">すべてをチェック</label>
<hr>
<label><input type="checkbox" name="skill" value="1">HTTML</label><br>
<label><input type="checkbox" name="skill" value="2">JavaScript</label><br>
<label><input type="checkbox" name="skill" value="3">PHP</label><br>
<label><input type="checkbox" name="skill" value="2">SQL</label><br>
</p>
<script type="text/javascript" src="1Ans.js"></script>
</body>
</html>
自分の思うようにうまくいったjs構文
function onCheckallChanged() {
let checkall = document.getElementById("checkall");
if (checkall.checked) {
checkall.nextSibling.textContent = "チェックを外す"
} else {
checkall.nextSibling.textContent = "すべてをチェック"
}
let checkboxes = document.getElementsByName("skill");
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = checkall.checked;
}
}
自分がこれでもうまくいくと思ったjs構文(チェックボックス無表示で文字列のみ反映)
function onCheckallChanged() {
let checkall = document.getElementById("checkall");
let hoge = document.getElementById("hoge");
if (checkall.checked) {
hoge.textContent = "チェックを外す"
} else {
hoge.textContent = "すべてをチェック"
}
let checkboxes = document.getElementsByName("skill");
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = checkall.checked;
}
}
又、自分はnextSiblingﾌﾟﾛﾊﾟﾃｨを理解していないせいもあると思うので、
具体的には選択したﾉｰﾄﾞのどこから見た時のどのﾉｰﾄﾞの事を指しているのかも教えてください。
お願い致します。
0
