私はこれを使用して私がページのすべてのチェックされたチェックボックスを得ることができることを知っています:
$('input[type=checkbox]').each(function () {
var sThisVal = (this.checked ? $(this).val() : "");
});
しかし、私は今、これを私が含めたくないいくつかの他のチェックボックスがあるページで使用しています。特定のクラスを持つチェックボックスのみを見るように上記のコードを変更するにはどうすればよいですか。
$('.theClass:checkbox:checked')
はチェックされたすべてのチェックボックスをクラスtheClass
で提供します。
$('input:checkbox.class').each(function () {
var sThisVal = (this.checked ? $(this).val() : "");
});
:checkbox
はチェックボックスのセレクターです(実際には、セレクターのinput
部分を省略することもできますが、以前のバージョンのライブラリでは奇妙な結果が得られることがよくありますが、新しいバージョンでは修正されています)。 ) .class
はclass
を含む要素クラス属性のセレクタです。
必須 .map
の例:
var checkedVals = $('.theClass:checkbox:checked').map(function() {
return this.value;
}).get();
alert(checkedVals.join(","));
$('input.yourClass:checkbox:checked').each(function () {
var sThisVal = $(this).val();
});
これにより、クラス名 "yourClass"のすべてのチェックボックスが表示されます。この例は、条件付きチェックではなくjQueryセレクタcheckedを使用するため、私はこの例が好きです。個人的には値を格納するために配列を使い、それから必要に応じてそれらを使います:
var arr = [];
$('input.yourClass:checkbox:checked').each(function () {
arr.Push($(this).val());
});
すべてのチェックボックスの値を配列として取得する必要がある場合は、次のようにします。
let myArray = (function() {
let a = [];
$(".checkboxes:checked").each(function() {
a.Push(this.value);
});
return a;
})()
$('input.theclass[type=checkbox]').each(function () {
var sThisVal = (this.checked ? $(this).val() : "");
});
すべての値を配列に入れる簡単な方法
var valores = (function () {
var valor = [];
$('input.className[type=checkbox]').each(function () {
if (this.checked)
valor.Push($(this).val());
});
return valor;
})();
console.log(valores);
それがあなたの特定のケースに役立つかどうかわからないし、あなたのケースでは、含めたいチェックボックスがすべて単一のフォームの一部であるのか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() : "");
});
$('input.myclass[type=checkbox]').each(function () {
var sThisVal = (this.checked ? $(this).val() : ""); });
jQueryクラスセレクタ を参照してください。
あなたはこのようなものを使うことができます:
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の値が選択されます。
<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>
私はこれがすでにこの質問に対するすばらしい答えをたくさん持っていることを知っています、しかし私は周りを見ながらこれを見つけました、そして私はそれが本当に使いやすいと思います。私は他の人のために共有したいと思った。
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);
});
});
あなたはこのように試すことができます
let values = (function() {
let a = [];
$(".chkboxes:checked").each(function() {
a.Push($(this).val());
});
return a;
})();