Q&A
横から失礼。
最近のjQueryなら私はon()の方がいいと思ってます。
foreachなどで動的に要素数が変化する項目一覧の頭に付いたチェックボックスに、
全てチェックが付いていれば、アラートを出すという処理を作っているのですが、
全部がチェックされているか判定する方法が上手くいかず困っています。
例：動的に6つチェックボックスが生成された例
<input type="checkbox" id="check1" name="checksample" value="1"> <label for="check1">チェックボックス１</label> <input type="checkbox" id="check2" name="checksample" value="2"> <label for="check2">チェックボックス２</label> <input type="checkbox" id="check3" name="checksample" value="3"> <label for="check3">チェックボックス３</label> <input type="checkbox" id="check4" name="checksample" value="4"> <label for="check4">チェックボックス４</label> <input type="checkbox" id="check5" name="checksample" value="5"> <label for="check5">チェックボックス５</label> <input type="checkbox" id="check6" name="checksample" value="6"> <label for="check6">チェックボックス６</label>この場合は6つ存在するチェックボックスが全てチェックされていればアラートを出す、
というような判定方法てどのようすれば宜しいでしょうか。ご意見頂けると幸いです。
回答2件
0
こんにちは。
「すべてのチェックボックスがチェックされている。」
ということは、
「チェックされていないチェックボックスの個数が０」
と同じであるという考え方で、以下
lang
1$("input[type=checkbox]:not(:checked)").size() == 0
を判定に使うのはいかがでしょうか。以下、例になります。
lang
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>11021</title> 6<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 7<script> 8$(function() { 9 $('#checkBtn').click(function(){ 10 if ( $("input[type=checkbox]:not(:checked)").size() == 0 ) { 11 alert("はい。すべてチェックされています。"); 12 } 13 }); 14} ); 15</script> 16</head> 17<body> 18<input type="checkbox" id="check1" name="checksample" value="1"> 19<label for="check1">チェックボックス１</label><br /> 20<input type="checkbox" id="check2" name="checksample" value="2"> 21<label for="check2">チェックボックス２</label><br /> 22<input type="checkbox" id="check3" name="checksample" value="3"> 23<label for="check3">チェックボックス３</label> <br /> 24<input type="checkbox" id="check4" name="checksample" value="4"> 25<label for="check4">チェックボックス４</label><br /> 26<input type="checkbox" id="check5" name="checksample" value="5"> 27<label for="check5">チェックボックス５</label><br /> 28<input type="checkbox" id="check6" name="checksample" value="6"> 29<label for="check6">チェックボックス６</label><br /> 30<hr /> 31<input type="button" id="checkBtn" value="すべてチェックされていますか？" /> 32</body> 33</html>
[すべてチェックされていますか？]のボタンをクリックしたときに、すべてが
チェックされていれば、「はい。すべてチェックされています。」のアラート
を表示します。
以上、ご参考になれば幸いです。
投稿2015/06/09 14:25
総合スコア9058
0
ベストアンサー
jQueryを使えるのでしたら次のように書くことができます。
lang
1$(function() { 2 var checkbox_selector = "input[type=checkbox]"; 3 4 $("body").delegate(checkbox_selector, "click", function() { 5 var length, checked_length; 6 7 length = $(checkbox_selector).length; 8 checked_length = $(checkbox_selector + ":checked").length; 9 10 if (length === checked_length) { 11 alert("すべてがチェックされています"); 12 } 13 }); 14});
delegateメソッドは、動的に変化する要素にイベントを付加できる魔法のようなメソッドです。
このメソッドを使うことで、たとえここからチェックボックスが増えても正しく動作します。
投稿2015/06/09 13:48
編集2015/06/09 13:56
総合スコア199
jQueryの公式ドキュメントを見ると、確かにそのようなことが書かれていますね。
As of jQuery 1.7, .delegate() has been superseded by the .on() method.
（http://api.jquery.com/delegate/）
これからは.delegate()の代わりに.on()を使うことにします。
ご指摘ありがとうございました。
>anaprestooさん
>ShunsukeIzuiさん
御回答有り難う御座います。
お陰様で良い感じで実装することが出来ました！
また何かありましたらよろしくお願いします。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/10 13:43