文字

[Jquery脱してjsへ]複数のチェックボックスでチェックを一つしか付けさせない。[初心者向け]
公開:2020.11.06 更新:2020.11.06

らいどらです。

分かりにくいタイトルになってしまいましたが、ゲーム開発をJquery→jsに変換作業しているので、その覚書です。

詳細:複数あるチェックボックスで1つにチェックを付けた時、他のチェックボックスのチェックを外したい。
要するに:チェックを一つにしか付けさせない・一つしか選択させない。てことですね。

これが昔(半年前)は分からなくて、頭を抱えてJqueryの検索に出てきたソースをコピペしてましたね……恥ずかしいです…..

今回はチェックボックスが三つあり、一つだけ選択させたいシチュエーションで解説します。三つのinputタグには同じクラスを付けておきます。

Jquery版

Jqueryだと、

$(".inputclass").on("click", function(){
   $('.inputclass').prop('checked', false);
   $(this).prop('checked', true);
}); //チェックは1つだけ

こうなります。1行目、クリックファンクションでインプットをクリック(チェック)したときにクリックイベントを設定。

2行目、一旦(inputclass)クラスのチェックボックス全てのチェックを外す。

3行目、Jquery特有の$(this)を使用して、クリックしたチェックボックスのみのチェックを有効にする。

て感じです。thisについては調べてみた方が良いかも。

JS変換

さて、本題のJavaScriptへ

const inputclass = document.getElementsByClassName("inputclass");
  for(let i=0;i<inputclass.length;i++){
      inputclass[i].onclick = function(){
        inputclass[0].checked = false;
        inputclass[1].checked = false;
        inputclass[2].checked = false;
        this.checked = true;
    }
 }

1行目でinputclassクラスの要素を全て取得。getElementsByClassNameで取得した場合はElements[0]というように何番目の要素かを指定することを忘れずに。

2行目、取得した要素の数だけ処理を実行する準備。

for文を使用することにより、すべての取得した要素(チェックボックス)にクリックイベントを追加。

4・5・6行目、1,2,3番目のチェックボックスのチェックを外す。(本来はここもfor文でループした方が良いが見にくいのでやめた。)

7行目で今クリックしている(チェックしている)チェックボックスのみのチェックを有効に。

これでOKです。

おすすめ商品

巻末にHTML講座あったりするコミックだよ

言わずと知れる原作読めムーブ

コメント

内容をご確認の上、送信してください。