jqueryでcheckboxの扱いについてメモ

チェックボックスでチェックできる数を制限したい場合
以下の方法で実現出来ました。jquery使用

javascript

$(function() {
    //チェックボックスにクリックイベントを設定
    $("input:checkbox[@name^='chk']").click(function(){
        //チェックされている数を取得
        cnum = $("input:checkbox[@name^='chk']:checked").length;
        //チェック上限を３つに設定
        if(cnum > 3){
        //チェックを入れても外してもイベントが発生するので
        //現在チェックが入っている場合のみアラートを表示（チェックを入れた場合）
        if (this.checked) {
            alert("アイコンタイプの設定は３つまでです");
            return false;
        }else{
            return true;
        }
    }
    return true;
    });
});

html

<form>
<input type="checkbox" name="chk[]">チェックボックス１
<input type="checkbox" name="chk[]">チェックボックス２
<input type="checkbox" name="chk[]">チェックボックス３
<input type="checkbox" name="chk[]">チェックボックス４
</form>

Categories

JAVASCRIPT | 未分類

Tags

checkbox | JAVASCRIPT | jquery