[JavaScript] 라디오 버튼으로 전환/숨기기

라디오 버튼을 사용하여 표시 항목 전환

그림과 같은 선택 단추와 일람표가 있어 선택한 선택 단추 데이터를 표시하는 기능입니다.
이미지만으로는 이 기능으로 할 수 있는 일은 상상하기 어렵지만, 로그인 화면에'미등록','이미 등록된'무선 버튼을 설정하면 각자의 형식 등을 표시할 수 있는 페이지 제작!

빨리 이루어져라!

먼저 HTML의 무선 버튼 코드입니다.
여기의 포인트는 다음과 같은 세 가지다.(※ 이후 자바스크립트에서 사용)
Form에게 이름을 지어주세요.この記事では　<form name="RadioForm>- 각 라디오 버튼에 ID를 추가합니다.id="all" id="april" などですね。- 클릭 이벤트를 엽니다.onclick="monthRadio();.
모든 이름의 취법이 적당하니 자기가 한 것에 따라 변경하세요.
index.html

    <h1>誕生月</h1>
    <form name="RadioForm">
        <input type="radio" name="month" id="all" onclick="monthRadio();" value="all">
        <label for="all">すべて</label>
        <input type="radio" name="month" id="april" onclick="monthRadio();" value="april">
        <label for="april">4月</label>
        <input type="radio" name="month" id="may" onclick="monthRadio();" value="may">
        <label for="may">5月</label>
        <input type="radio" name="month" id="june" onclick="monthRadio();" value="june">
        <label for="june">6月</label>
    </form>

다음은 HTML의 Table 코드입니다.
(이번에는 JS를 위주로 하기 때문에 데이터베이스를 사용하지 않습니다. 반드시 적용하고 도전하세요!)
여기 포인트는 딱 하나야.
- 데이터 내용에 따라 카테고리를 지정합니다.<tr class="april"> の箇所です。디스플레이와 숨기기를 전환할 종류를 지정합니다.
매달 데이터가 하나밖에 없는 상황에서 ID를 사용하는 것이 반이 아니라 더 똑똑하다!(4월, 5월, 6월에 태어난 사람이 한 명만 들어온 데이터베이스의 경우 등)
아이디를 이용한 기사가 많기 때문에 구글에 가보세요!
index.html

    <table border="solid 1px">
            <tr><th width="60px">No.</th><th style="width: 200px; text-align: left;">名前</th><th>誕生日</th></tr>
            <tr class="april">
                <td>1</td>
                <td style="text-align: left;">親鸞</td>
                <td>4月1日</td>
            </tr>
            <tr class="june">
                <td>2</td>
                <td style="text-align: left;">アダム・スミス</td>
                <td>6月5日</td>
            </tr>
            <tr class="may">
                <td>3</td>
                <td style="text-align: left;">斎藤茂吉</td>
                <td>5月14日</td>
            </tr>
            //以下繰り返しなので省略
    </table>

드디어 도착했습니다.오래 기다리셨습니다!
여기에는 코드 내의 주석으로 설명한다.
단지 1점만 주의하면 querySelectorAll('クラス名')에서 지정한 요소는 직접 사용할 수 없다.
나는 이렇게 썼는데, 줄곧 움직이지 않았다...뻣뻣하다д゜)querySelectorAll('クラス名').style.display="none"이러한 오류 문은 Console에서 나타납니다.Uncaught TypeError: Cannot set property 'display' of undefined querySelectorAll 취득한 경우 forEach로 요소를 하나하나 추출하여 스타일을 결정한다.
index.js

    //ラジオボタンのクリックイベントで付けた関数で機能を実装します。
    function monthRadio() {

    //どのラジオボタンがチェックされているか。（条件分岐で使用）
    check0 = document.RadioForm.all.checked;  //すべてにチェック
    check1 = document.RadioForm.april.checked;  //4月にチェック
    check2 = document.RadioForm.may.checked;  //5月にチェック
    check3 = document.RadioForm.june.checked;  //6月にチェック

    //表のところで指定したクラスを取得しています。（表示・非表示の切替で使用）
    var all = document.querySelectorAll('.april, .may, .june');
    var april = document.querySelectorAll('.april');
    var may = document.querySelectorAll('.may');
    var june = document.querySelectorAll('.june');

    //チェックされているラジオボタンにより分岐させていきます。
      //すべてにチェックがtrueなので、すべてにチェックされているときに表示したいコードを書きます。
    if (check0 == true) {
    //取得したクラスをforEachで展開して、それぞれのクラスのdisplayスタイルを指定します。
        all.forEach(function(elem){
            elem.style.display = "";
        });
    }
    //上記と同様ですね。
    else if (check1 == true) {
        april.forEach(function(elem){
            elem.style.display = "";
        });
        may.forEach(function(elem){
            elem.style.display = "none";
        });
        june.forEach(function(elem){
            elem.style.display = "none";
        });
    //繰り返しになるので以下省略
    }
}

이렇게 하면 선택 단추를 사용하는 디스플레이 전환을 실현할 수 있다.
사용getElementById된 기사가 많았지만 반에서 지정해야 하는 경우를 발견하지 못해 자신의 메모에도 써보았다.
처음 쓰는 기사라 아직 미숙하지만 업데이트와 보완 기사도 쓰고 싶은데 잘 부탁드립니다!