var $ = jQuery; $(document).ready(function () { $('input[name="check-all"]').on('click', function() { $('input[type="checkbox"]').attr('checked', true).prop('checked', true).change(); }); $('input[name="uncheck-all"]').on('click', function(){ $('input[type="checkbox"]').removeAttr('checked').prop('checked', false).change(); }); $('form').on('submit', function (){ var $checkbox = $('input[name="alert-checkbox"]'); alert( $checkbox.attr('checked') || $checkbox.prop('checked') ? 'チェックしちゃいましたね。' : 'チェックしませんでしたね。' ); return false; }); });
<form action="?" method="POST"> <p> <label><input type="checkbox" name="checkbox1" value="1"> チェック1</label> <label><input type="checkbox" name="checkbox2" value="2"> チェック2</label> <label><input type="checkbox" name="checkbox3" value="3"> チェック3</label> <label><input type="checkbox" name="checkbox4" value="4"> チェック4</label><br> <label><input type="checkbox" name="alert-checkbox" value="1"> これをチェックして送信するとアラートが出ます。</label> </p> <p> <input type="button" name="check-all" value="全てのチェックを入れる"> <input type="button" name="uncheck-all" value="全てのチェックを外す"> </p> <p> <input type="submit" value="送信"> </p> </form>