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



5 Answers

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

説明する例

:checkbox:checkboxのセレクタです(セレクタのinput部分を省略することもできますが、以前のバージョンのライブラリでこれを行う際に奇妙な結果が得られるニッチなケースがありました。バージョン)。 .classはクラスを含む要素クラス属性のセレクタです。

Question

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

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

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




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



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

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

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



私はそれがあなたの特定のケースに役立つかどうかは分かりません。あなたのケースでは、インクルードしたいチェックボックスがすべて単一のフォームまたは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を使用して、id = "selective"のUL内のチェックボックスのみを通過します。

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



次のようなものを使うことができます:
HTML:

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


JQuery:

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


1と3の値を選択します




<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






Related