การใช้ jquery เพื่อรับช่องทำเครื่องหมายที่เลือกทั้งหมดด้วยชื่อคลาสที่แน่นอน

ฉันรู้ว่าฉันจะได้รับช่องทำเครื่องหมายทั้งหมดในหน้าโดยใช้สิ่งนี้:

$('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ส่วนของตัวเลือกได้แม้ว่าฉันจะพบกรณีเฉพาะที่คุณจะได้รับผลลัพธ์ที่แปลกในการทำเช่นนี้ในห้องสมุดรุ่นก่อนหน้า เป็นตัวเลือกสำหรับแอตทริบิวต์ระดับองค์ประกอบที่มี.classclass

บังคับ.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 ที่เลือกแทนการตรวจสอบแบบมีเงื่อนไข ส่วนตัวฉันจะใช้อาร์เรย์เพื่อเก็บค่าจากนั้นใช้พวกเขาตามต้องการเช่น:

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

ฉันไม่แน่ใจว่าจะช่วยคุณได้หรือไม่และในกรณีของคุณช่องทำเครื่องหมายที่คุณต้องการรวมนั้นเป็นเพียงส่วนหนึ่งของแบบฟอร์มเดียวหรือ 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

วิธีง่ายๆในการรับค่าทั้งหมดลงในอาร์เรย์

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

})();

console.log(valores);

คุณสามารถลองสิ่งนี้

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

ฉันรู้ว่านี่มีคำตอบมากมายสำหรับคำถามนี้ แต่ฉันพบสิ่งนี้ในขณะที่ท่องไปรอบ ๆ และฉันคิดว่ามันใช้งานง่ายมาก คิดว่าฉันจะแบ่งปันให้คนอื่นที่กำลังมองหา

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

$(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()