jqueryを使用して、特定のクラス名を持つすべてのチェックボックスを取得する


215

私はこれを使用してページ上のすべてのチェックされたチェックボックスを取得できることを知っています:

$('input[type=checkbox]').each(function () {
    var sThisVal = (this.checked ? $(this).val() : "");
});

ただし、他のチェックボックスを含めたくないページでこれを使用しています。上記のコードを変更して、特定のクラスが含まれているチェックボックスのみを確認するにはどうすればよいですか?


class代わりにタイトルを更新してみましょうnameか?
ラスカム

@Russ Cam-すでに完了
leora

$( 'input [type = checkbox] :checked')も機能します。
スーパークール

回答:


392

$('.theClass:checkbox:checked')クラスでチェックされているすべてのチェックボックスが表示されますtheClass


8
いいね。また、$( '。theClass:checkbox:not(:checked)')は、チェックされていないものをすべて取得します。
Venugopal M

これを名前の付いたすべてのチェックボックスに実行できますか?
FluffyBeing

チェックした要素に別のクラスを追加するにはどうすればよいですか?チェックした入力要素に境界線を表示したい。
Najam Us Saqib

120
$('input:checkbox.class').each(function () {
       var sThisVal = (this.checked ? $(this).val() : "");
  });

実証する例

:checkboxチェックボックスのセレクターです(実際にinputは、セレクターの一部を省略できますが、ライブラリの以前のバージョンでこれを行うと奇妙な結果が得られるニッチなケースが見つかりました。新しいバージョンでは修正されているはずです)。 .classを含む要素クラス属性のセレクターですclass


9
:checkboxに関するjqueryのメモでは、[type = "checkbox"]を使用することをお勧めしています。$( '[type = "checkbox"]。class')....または$( 'input [type = "checkbox"]。class')
TSmith

@TSmith参照がありますか?
ラスカム2013年

9
私はそれをここから読みます:api.jquery.com/checkbox-selector ...「Additional Notes」の下
TSmith

72

義務的な.map例:

var checkedVals = $('.theClass:checkbox:checked').map(function() {
    return this.value;
}).get();
alert(checkedVals.join(","));

3
$( 'input.theClass:checked')。map(function(){return this.value})。get()。join( '、');
Fedir RYKHTIK 2013年

@Fedir:コマンドon,onの結果(チェックボックスがオンの場合はすべて 'on')
Jay

@Jayコマ区切りの文字列で値を取得するには、チェックボックスの値属性を設定する必要があります
Kamran Ali

21
$('input.yourClass:checkbox:checked').each(function () {
    var sThisVal = $(this).val();
});

これにより、クラス名「yourClass」のすべてのチェックボックスが取得されます。条件チェックを行う代わりにチェックされたjQueryセレクターを使用するため、この例が好きです。個人的には、配列を使用して値を格納し、必要に応じて次のように使用します。

var arr = [];
$('input.yourClass:checkbox:checked').each(function () {
    arr.push($(this).val());
});

値を配列に格納する必要がある場合は、.mapkarim79の回答に示されているように、より快適な代替手段になる可能性があります。
duplode

1
ありがとう:)私はすべてのチェックされたチェックボックスを見つける必要があり、あなたの答えはそれを行います。
ufk 2014年

13

チェックされているすべてのチェックボックスの値を配列として取得する必要がある場合:

let myArray = (function() {
    let a = [];
    $(".checkboxes:checked").each(function() {
        a.push(this.value);
    });
    return a;
})()

10
 $('input.theclass[type=checkbox]').each(function () {
   var sThisVal = (this.checked ? $(this).val() : "");
 });

8

特定の場合に役立つかどうかはわかりませんが、含める場合のみ含めるチェックボックスがすべて1つのフォーム、divまたはテーブルの一部であるかどうかはわかりませんが、いつでもすべてのチェックボックスを選択できます特定の要素の内部。例えば:

<ul id="selective">
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
</ul>

次に、次のjQueryを使用して、そのUL内のid = "selective"のチェックボックスのみを通過します。

$('#selective input:checkbox').each(function () {
 var sThisVal = (this.checked ? $(this).val() : "");
});


7

次のようなものを使用できます:
HTML:

<div><input class="yourClass" type="checkbox" value="1" checked></div>
<div><input class="yourClass" type="checkbox" value="2"></div>
<div><input class="yourClass" type="checkbox" value="3" checked></div>
<div><input class="yourClass" type="checkbox" value="4"></div>


jQuery:

$(".yourClass:checkbox").filter(":checked")


1と3の値を選択します。


これが最良の答えです。
Marcos Buarque

7

すべての値を配列に入れる簡単な方法

var valores = (function () {
    var valor = [];
    $('input.className[type=checkbox]').each(function () {
        if (this.checked)
            valor.push($(this).val());
    });
    return valor;

})();

console.log(valores);

7

このように試すことができます

let values = (function() {
                let a = [];
                $(".chkboxes:checked").each(function() {
                    a.push($(this).val());
                });
                return a;
            })();

4
<input type="checkbox" id="Checkbox1" class = "chk" value = "1" />
<input type="checkbox" id="Checkbox2" class = "chk" value = "2" />
<input type="checkbox" id="Checkbox3" class = "chk" value = "3" />
<input type="checkbox" id="Checkbox4" class = "chk" value = "4" />
<input type="button" id="demo" value = "Demo" />

<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $("#demo").live("click", function () {
        $("input:checkbox[class=chk]:checked").each(function () {
            alert("Id: " + $(this).attr("id") + " Value: " + $(this).val());
        });
    });
</script>

http://www.jqueryfaqs.com/Articles/Get-values-of-all-checked-checkboxes-by-class-name-using-jQuery.aspx


3

私はこれがこの質問に対してたくさんの素晴らしい答えを持っていることを知っていますが、ブラウジング中にこれを見つけました、そしてそれは本当に使いやすいと思います。私が探している誰かのために共有したいと思いました。

HTML:

<fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" class="checkall"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>

jQuery:

$(function () {
    $('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
});

リファレンス: jQueryを使用した最も簡単な「すべてチェック」


1
$(document).ready(function(){
    $('input.checkD[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $(this).val('true');
        }
        else if($(this).prop("checked") == false){
            $(this).val('false');
        }
    });
});


-1
$("input[name='<your_name_of_selected_group_checkboxes>']:checked").val()

1
このコードについて説明してください。他の人が理解するのに役立ちます
Shafin Mahmud
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.