ＩＤ名の違う要素を一気に非表示にしたい

Question

【ＪＳ】
tukaimawasi = document.querySelectorAll('.nones');
alert(tukaimawasi);
HIHYOUZI();

<!-- ■■■■■■本人の場合■■■■■■■■ -->

if (IDs == "RAZ") {
tukaimawasi = document.getElementById( "RAZ_label" );
HYOUZI(); }

function HYOUZI() {
tukaimawasi.style.display = "block"; }
function HIHYOUZI() {
tukaimawasi.style.display = "none"; }

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ＨＴＭＬにはチェックボックスがあります。
チェックを押すと表示する機能は問題ありませんが、別チェックを押した際にＩＤ名の違う要素を一気に非表示にするにはどうすればいいのでしょうか？
Cllas名で試したのですがtukaimawasi.style.display = "none"; の部分でエラーになってしまいます

Answer 1

こんにちは

querySelectorAll で得られる tukaimawasi は、NodeList のオブジェクトですので、tukaimawasi に含まれる各Elementを何らかのループで取り出して、各Elementに対してスタイルを設定する必要があります。

以下のように修正してみるといかがでしょう？

修正前

tukaimawasi.style.display = "none"; 

修正後

tukaimawasi.forEach(e => { e.style.display = "none"; });

もし上記がエラーになる場合は、NodeList#forEach に対応していないブラウザーを使用していると思われますので、以下です。

修正後

[...tukaimawasi].forEach(e => { e.style.display = "none"; });

以上、参考になれば幸いです。

Comments

[kidaer]

無事に非表示にできました。ありがとうございます！

[jun68ykt]

どういたしまして。
> 無事に非表示にできました。
とのことでよかったです????