jqueryですべてのチェックされていないチェックボックスを見つける


197

チェックボックスのリストがあります:

<input type="checkbox" name="answer" id="id_1' value="1" />
<input type="checkbox" name="answer" id="id_2' value="2" />
...
<input type="checkbox" name="answer" id="id_n' value="n" />

チェックしたチェックボックスのすべての値を収集できます。私の質問は、チェックされていないチェックボックスのすべての値を取得するにはどうすればよいですか?私は試した:

$("input:unchecked").val();

チェックされていないチェックボックスの値を取得するために、私は得ました:

構文エラー、認識できない式:チェックされていません。

誰でもこの問題に光を当てることができますか?ありがとうございました!



回答:


434

エラーメッセージに示されているように、jQueryには:uncheckedセレクタが含まれていません。
代わりに、:checkedセレクターを反転する必要があります。

$("input:checkbox:not(:checked)")

4
そして、input [type = checkbox]を使用するのが最速です。
jClark

29

$("input:checkbox:not(:checked)") 未チェックのボックスを取得します。


10

そのためには、jQueryの機能を拡張します。これにより、セレクターに書き込む必要のあるテキストの量が短くなります。

$.extend($.expr[':'], {
        unchecked: function (obj) {
            return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
        }
    }
);

次に、を使用$("input:unchecked")して、チェックされているすべてのチェックボックスとラジオボタンを取得できます。


7

また、それはそのような方法で純粋なjsで達成することができます:

var matches = document.querySelectorAll('input[type="checkbox"]:not(:checked)');

3
$("input[type='checkbox']:not(:checked):not('\#chkAll\')").map(function () { 
   var a = ""; 
   if (this.name != "chkAll") { 
      a = this.name + "|off"; 
   } 
   return a; 
}).get().join();

これにより、チェックされていないすべてのチェックボックスが取得され、すべてのチェックボックスをチェック|チェック解除するために使用する「chkAll」チェックボックスが除外されます。データベースに渡す値を知りたいので、チェックボックスで値をオンにしているので、これらをオフに設定しました。

//looking for unchecked checkboxes, but don’t include the checkbox all that checks or unchecks all checkboxes
//.map - Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

//.get - Retrieve the DOM elements matched by the jQuery object.
//.join - (javascript) joins the elements of an array into a string, and returns the string.The elements will be separated by a specified separator. The default separator is comma (,).

2
OPとはまったく関係のないものを回答に含めないでください。彼はchkAll箱を使用しないので、それを言及する意味は何ですか。
MMM 2013年



0
$(".clscss-row").each(function () {
if ($(this).find(".po-checkbox").not(":checked")) {
               // enter your code here
            } });

1
StackOverflowへようこそ!コードに説明を追加してください。そうすることで、他のユーザー(これが探しているものである可能性があります)がコードの機能を理解できるようになります。
Nander Speerstra 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.