Sử dụng jquery để nhận tất cả các hộp kiểm tra với một tên lớp nhất định

Tôi biết tôi có thể nhận được tất cả các hộp kiểm tra trên một trang bằng cách này:

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

Nhưng tôi hiện đang sử dụng cái này trên một trang có một số hộp kiểm khác mà tôi không muốn đưa vào. Làm thế nào tôi có thể thay đổi mã ở trên để chỉ nhìn vào các hộp kiểm tra có một lớp nhất định trên chúng?

$('.theClass:checkbox:checked')sẽ cung cấp cho bạn tất cả các hộp kiểm tra với lớp theClass.

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

Một ví dụ để chứng minh.

:checkboxlà một công cụ chọn cho các hộp kiểm (trên thực tế, bạn có thể bỏ qua inputphần của công cụ chọn, mặc dù tôi đã tìm thấy các trường hợp thích hợp khi bạn nhận được kết quả lạ khi thực hiện điều này trong các phiên bản trước của thư viện. Tôi chắc chắn rằng chúng đã được sửa trong các phiên bản sau). .classlà bộ chọn cho thuộc tính lớp phần tử có chứa class.

.mapVí dụ bắt buộc :

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

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

Điều này sẽ nhận được tất cả các hộp kiểm của tên lớp "yourClass". Tôi thích ví dụ này vì nó sử dụng bộ chọn jQuery được kiểm tra thay vì kiểm tra có điều kiện. Cá nhân tôi cũng sẽ sử dụng một mảng để lưu trữ giá trị, sau đó sử dụng chúng khi cần, như:

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

Nếu bạn cần lấy giá trị của tất cả các hộp kiểm tra dưới dạng một mảng:

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() : "");
 });

Tôi không chắc liệu nó có giúp ích cho trường hợp cụ thể của bạn không và tôi không chắc trong trường hợp của bạn, các hộp kiểm bạn muốn đưa vào chỉ là một phần của một biểu mẫu hoặc div hoặc bảng, nhưng bạn luôn có thể chọn tất cả các hộp kiểm bên trong một yếu tố cụ thể. Ví dụ:

<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>

Sau đó, bằng cách sử dụng jQuery sau, nó CHỈ đi qua các hộp kiểm trong UL đó với 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() : ""); });

Xem các bộ chọn lớp jQuery .

Bạn có thể sử dụng một cái gì đó như thế này:
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")

Nó sẽ chọn giá trị của 1 và 3.

Cách đơn giản để nhận tất cả các giá trị vào một mảng

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

})();

console.log(valores);

Bạn có thể thử như thế này

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

<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-USE-jQuery.aspx

Tôi biết điều này đã có một loạt các câu trả lời tuyệt vời cho câu hỏi này nhưng tôi đã tìm thấy nó trong khi duyệt xung quanh và tôi thấy nó thực sự dễ sử dụng. Tôi muốn chia sẻ cho bất cứ ai khác tìm kiếm.

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);
    });
});

Tham khảo: Dễ dàng nhất "Kiểm tra tất cả" với jQuery

$(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');
        }
    });
});

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