チェックボックスで全選択/全解除するボタンを作ってみる！Javascriptの勉強

よく見かけるチェックボックスの全選択/全解除ってどうやるのかなと思い調べてみました。

チェックボックスで全選択/全解除する

サンプルデータを作成してみました。

1つのボタンで制御

See the Pen チェックボックス全選択/全解除 by Nakamoto (@programmerlife) on CodePen.

Javascript抜粋

初期表示でuncheckメソッドを呼び出し、処理を実行したのちボタンにcheckedを上書きしておきます。ボタンが押されたらcheckedメソッドを呼び出し処理を実行したのちボタンにunCheckedを上書きしてます。この動きがボタンをクリックするたびに実装されます。

// ボタンにonclick属性を追加
const btn = document.querySelector("#btn");
btn.onclick = unChecked;

function unChecked() {
    let boxes = document.querySelectorAll('input[type="checkbox"]');
    for (let i = 0; i < boxes.length; i++) {
        boxes[i].checked = false;
        this.onclick = checked;
    }
}

function checked() {
    let boxes = document.querySelectorAll('input[type="checkbox"]');
    for (let i = 0; i < boxes.length; i++) {
        boxes[i].checked = true;
        this.onclick = unChecked;
    }
}

2つのボタンで制御

1つのボタンで制御した場合、checkedを押した後に手動でチェックボックスのチェックを外してボタンを押すと空打ちしてしまうのを阻止したかったのですが（逆もしかり）うまくいかず、解決しようと思った場合はボタンを２つにわけるのが今の所よさそうです。

See the Pen チェックボックス全選択/全解除 ボタン２つ by Nakamoto (@programmerlife) on CodePen.

Javascript抜粋

html側にonclickの設定をしています。

function unChecked() {
    let boxes = document.querySelectorAll(".cla");
    for (let i = 0; i < boxes.length; i++) {
        boxes[i].checked = false;
    }
}
function checked() {
    let boxes = document.querySelectorAll(".cla");
    for (let i = 0; i < boxes.length; i++) {
        boxes[i].checked = true;
    }
}

こちらのほうがわかりやすいといえばわかりやすいですね。

おわり

もっとうまく作れたんじゃないかなとちょっと不完全燃焼です。もっといい方法があれば追記します。コメントもいただければ嬉しいです。

参考

https://www.javascripttutorial.net/javascript-dom/javascript-checkbox/