ラジオボタンでなく、チェックボックスで常にボタンを一つだけ選択できるようにするにはJavascriptでどのように制御するのか調べてみました。
※チェックボックスにこだわりがなければラジオボタンを使うのが一般的です。
サンプルコード
例えば3人のうち1人をチェックボックスで指定するとします。
処理を1つずつ書く
あまり深く考えずに作ってみました。
See the Pen チェックボックスで1つだけ選択(処理を１つずつ書く) by Nakamoto (@programmerlife) on CodePen.
上記のJavascript
１つ１つに処理を書いているのであまりうまくない例です。
function chbx1() {
if (document.getElementById("id1").checked== true) {
document.getElementById("id2").checked = false;
document.getElementById("id3").checked = false;
}
}
function chbx2() {
if (document.getElementById("id2").checked == true) {
document.getElementById("id1").checked = false;
document.getElementById("id3").checked = false;
}
}
function chbx3() {
if (document.getElementById("id3").checked == true) {
document.getElementById("id1").checked = false;
document.getElementById("id2").checked = false;
}
}選択肢の変動に対応する
上記の場合3つくらいだから1つずつ処理を書いてもまぁなんとかなりますが、これが増えたらいちいち処理を増やさなければならず面倒です。
そんなときはどうするべきなのかなと思い、再度調べました。
See the Pen チェックボックスで1つだけ選択（複数対応版 stackoverflowより） by Nakamoto (@programmerlife) on CodePen.
参考元のstack overflowからLuc Eeckelaertさんのコードをパクってきています。ほかにも方法はあったのですが、個人的に一番わかりやすかったためこちらのコードを例に挙げさせていただきました。
引数に this をいれることでinputタグの情報を持ってきており、このチェックボックスがchecked=”true”ならと条件が書かれています。
2つのときでもこっちのほうがあとから増えてしまったときなどにもスムーズに対応できてよさそうですね。
おまけ 選択肢の変動に対応する + ループ処理
参考元のstack overflowだとnameをつかってまとめてjQueryで変更しているような処理を見ました。
上記のままだとinputタグが追加された場合、document.getElementById(“id1”).checked = false;のような処理を追加する必要があります。
パクって終わりなのもよろしくないので練習がてらinputタグが変動してもJavascriptに手を加えなくて良いように作ってみました。
See the Pen RwoYoPx by Nakamoto (@programmerlife) on CodePen.
Javascript一部抜粋
let boxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < boxes.length; i++) {
boxes[i].checked = false;
}参考元のstack overflowのコードにquerySelectorAllで取得した input[type=”checkbox”] たちをループ処理でchecked = false にしています。そのあとにチェックされたチェックボックスを checked = true にしています。
これがスマートなやり方かはわかりませんが、これでhtmlでinputタグが増えてもjavascriptを修正することなく対応できるようになったかなと思います。
おわり
修正が加わった時に変更しなくて良いような処理を考えておくかで、後々の作業量がぐっと減りますよね。
調べていると、頭の良い人たちがいっぱいいて驚きますね。querySelectorについても近々まとめたいと思います。
参考サイト
make checkbox behave like radio buttons with javascript
