質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • jQuery

    6915questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jqueryでチェックボックスが全てチェックされているか判定

解決済

回答 2

投稿

  • 評価
  • クリップ 3
  • VIEW 10K+

sak71g

score 13

foreachなどで動的に要素数が変化する項目一覧の頭に付いたチェックボックスに、
全てチェックが付いていれば、アラートを出すという処理を作っているのですが、
全部がチェックされているか判定する方法が上手くいかず困っています。

例:動的に6つチェックボックスが生成された例

<input type="checkbox" id="check1" name="checksample" value="1">
<label for="check1">チェックボックス1</label>
<input type="checkbox" id="check2" name="checksample" value="2">
<label for="check2">チェックボックス2</label>
<input type="checkbox" id="check3" name="checksample" value="3">
<label for="check3">チェックボックス3</label>
<input type="checkbox" id="check4" name="checksample" value="4">
<label for="check4">チェックボックス4</label>
<input type="checkbox" id="check5" name="checksample" value="5">
<label for="check5">チェックボックス5</label>
<input type="checkbox" id="check6" name="checksample" value="6">
<label for="check6">チェックボックス6</label>

この場合は6つ存在するチェックボックスが全てチェックされていればアラートを出す、
というような判定方法てどのようすれば宜しいでしょうか。ご意見頂けると幸いです。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+6

こんにちは。

「すべてのチェックボックスがチェックされている。」
ということは、
「チェックされていないチェックボックスの個数が0」
と同じであるという考え方で、以下
$("input[type=checkbox]:not(:checked)").size() == 0 
を判定に使うのはいかがでしょうか。以下、例になります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11021</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
    $('#checkBtn').click(function(){
        if ( $("input[type=checkbox]:not(:checked)").size() == 0 ) {
            alert("はい。すべてチェックされています。");
        }
    });
} );
</script>
</head>
<body>
<input type="checkbox" id="check1" name="checksample" value="1"> 
<label for="check1">チェックボックス1</label><br />
<input type="checkbox" id="check2" name="checksample" value="2"> 
<label for="check2">チェックボックス2</label><br />
<input type="checkbox" id="check3" name="checksample" value="3"> 
<label for="check3">チェックボックス3</label> <br />
<input type="checkbox" id="check4" name="checksample" value="4"> 
<label for="check4">チェックボックス4</label><br /> 
<input type="checkbox" id="check5" name="checksample" value="5"> 
<label for="check5">チェックボックス5</label><br /> 
<input type="checkbox" id="check6" name="checksample" value="6"> 
<label for="check6">チェックボックス6</label><br /> 
<hr />
<input type="button" id="checkBtn" value="すべてチェックされていますか?" />
</body>
</html>
[すべてチェックされていますか?]のボタンをクリックしたときに、すべてが
チェックされていれば、「はい。すべてチェックされています。」のアラート
を表示します。

以上、ご参考になれば幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/10 22:43

    > ykt68さん
    御回答、有り難う御座いました。
    色んな方から頂く意見や回答で、そういう解き方・考え方・アプローチもあるんだ、
    といつも感心させられて発想が足りないと感じさせられます。
    もっと考えれるよう頑張ります。

    キャンセル

checkベストアンサー

+3

jQueryを使えるのでしたら次のように書くことができます。
$(function() {
    var checkbox_selector = "input[type=checkbox]";

    $("body").delegate(checkbox_selector, "click", function() {
        var length, checked_length;

        length = $(checkbox_selector).length;
        checked_length = $(checkbox_selector + ":checked").length;

        if (length === checked_length) {
            alert("すべてがチェックされています");
        }
    });
});
delegateメソッドは、動的に変化する要素にイベントを付加できる魔法のようなメソッドです。
このメソッドを使うことで、たとえここからチェックボックスが増えても正しく動作します。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/10 09:29

    横から失礼。
    最近のjQueryなら私はon()の方がいいと思ってます。

    キャンセル

  • 2015/06/10 17:34

    jQueryの公式ドキュメントを見ると、確かにそのようなことが書かれていますね。

    As of jQuery 1.7, .delegate() has been superseded by the .on() method.
    (http://api.jquery.com/delegate/)

    これからは.delegate()の代わりに.on()を使うことにします。
    ご指摘ありがとうございました。

    キャンセル

  • 2015/06/10 22:40

    >anaprestooさん
    >ShunsukeIzuiさん

    御回答有り難う御座います。
    お陰様で良い感じで実装することが出来ました!
    また何かありましたらよろしくお願いします。

    キャンセル

関連した質問

同じタグがついた質問を見る

  • jQuery

    6915questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。