jQuery チェックボックス全選択、解除

ここではjQueryでチェックボックスを全選択、解除する方法を解説しています。

Script

$(function() {
    $('#all').click(function() {
        if (this.checked) {
            $('[name="deleteId[]"]').prop('checked', $(this).is(':checked'));
        }
        else {
            $('[name="deleteId[]"]').removeAttr('checked');
        }
    });
});

html

<form action="<?php echo $_SERVER['PHP_SELF'];?>" name="checktest" id="checktest" method="post">
<input type="checkbox" id="all">全選択/全解除<br />
<input type="checkbox" name="deleteId[]" id="deleteId" value="1"><br />
<input type="checkbox" name="deleteId[]" id="deleteId" value="2"><br />
<input type="checkbox" name="deleteId[]" id="deleteId" value="3"><br />
</form>

解説
「this.checked」と記述するとセレクタで指定したチェックボックスが選択されているかがわかるので、処理を分けています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください