ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript:同一クラスを割り当てたチェックボックスを択一選択にするJavaScriptが正常に動かなくなっていて焦りました

複数から1つだけ選べる択一選択にするなら、ラジオボタンにすべきです。
選択した後で、選択しないということもあるため、チェックボックスになっています。

チェックボックスで択一選択にする方法

JavaScriptで、チェックされるたびに、同一クラスを割り当てたチェックボックスのチェックを外しています。
外す際に、チェックされたチェックボックスのidを除外の条件としています。

$("input[type='checkbox']").bind("change", function (e) {
    if (this.checked) {
        var index = $(this).attr("class");
        $("." + index).filter(":not(#" + $(this).attr("id") + ")").attr("checked", false);
    }
});

クラスの追加で動作しなくなる

上記のJavaScriptで動作するのを確認しました。
確認後、いろいろ機能を追加したので一通り動作確認をしていて何気なく操作したら、同一クラスを割り当てたチェックボックス複数選択できてしまいます。

焦りつつ原因を調べると、チェックボックスのクラスに2個目のクラスを設定したのが原因で、

var index = $(this).attr("class");

の部分で、取得できるのが

class1 class2

となっていました。

元々はclass1だけだったので、以下のようにスペースで分割してclass1だけを利用するように修正したところ、動作するようになりました。

$("input[type='checkbox']").bind("change", function (e) {
    if (this.checked) {
        var index = $(this).attr("class").split(" ");
        $("." + index[0]).filter(":not(#" + $(this).attr("id") + ")").attr("checked", false);
    }
});

まとめ

影響を考慮しないでクラスを追加したために、焦る結果となりました。
追加するたびにこまめにテストをする習慣を身につけていきたいです。