ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายทั้งหมดแล้วหรือยัง


139

ฉันจะตรวจสอบว่าช่องทำเครื่องหมายทั้งหมดclass="abc"ถูกเลือกได้อย่างไร?

ฉันต้องตรวจสอบทุกครั้งที่มีการตรวจสอบหรือไม่เลือก ฉันจะทำมันเมื่อคลิกหรือเปลี่ยน?

คำตอบ:


257

ฉันคิดว่าวิธีที่ง่ายที่สุดคือตรวจสอบสภาพนี้:

$('.abc:checked').length == $('.abc').length

คุณสามารถทำได้ทุกครั้งที่มีการทำเครื่องหมายในช่องใหม่:

$(".abc").change(function(){
    if ($('.abc:checked').length == $('.abc').length) {
       //do something
    }
});

2
lengthไม่ funcion ฉันคิดว่าคุณหมายถึง ..size()
Jishnu AP

3
ขอบคุณ @TheSuperTramp! ฉันหมายถึงlengthแต่ฉันไม่เคยลืมมันเป็นคุณสมบัติและไม่ใช่วิธีการ แก้ไขแล้ว
cbrandolino

97
$('input.abc').not(':checked').length > 0

2
โซลูชั่นที่สมบูรณ์แบบสะอาดและสง่างาม "if ($ ('input.abc'). not (": checked "). length) {... }" ยังใช้งานได้
Skorunka František

1
คำตอบนั้นไม่ถูกต้อง มันจะตรวจสอบว่ามีช่องทำเครื่องหมายใด ๆ ที่ตรวจสอบ แต่คำถามคือตรวจสอบว่าได้เลือกช่องทำเครื่องหมายทั้งหมดหรือไม่ $('input.abc').not(':checked').length === 0ดังนั้นรหัสที่ถูกต้องคือ
hlcs

1
คำตอบนี้ดีกว่าคำตอบที่ยอมรับถ้าคุณพิจารณาประสิทธิภาพ นี่จะวนซ้ำเพียงครั้งเดียวแทนที่จะเป็นสองครั้ง
Maarten Kieft

15

คุณสามารถใช้ได้ change()

$("input[type='checkbox'].abc").change(function(){
    var a = $("input[type='checkbox'].abc");
    if(a.length == a.filter(":checked").length){
        alert('all checked');
    }
});

ทั้งหมดนี้จะทำคือการตรวจสอบว่าจำนวนรวมของช่องทำเครื่องหมายตรงกับจำนวน.abc.abc:checked

ตัวอย่างโค้ดบนjsfiddle


ไม่แน่ใจว่าทำไม แต่ a.length ของฉันให้ค่า 8 กับฉันในขณะที่ฉันมีช่องทำเครื่องหมายเพียง 4 ช่อง
santa

นี่filterเป็นทางออกที่ดีสำหรับกลุ่มของช่องทำเครื่องหมายขอบคุณมาก
overallduka


3

ส่วนที่ 1 ของคำถามของคุณ:

var allChecked = true;
$("input.abc").each(function(index, element){
  if(!element.checked){
    allChecked = false;
    return false;
  } 
});

แก้ไข:

คำตอบ (http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480) ด้านบนน่าจะดีกว่า


1

เกณฑ์การค้นหาเป็นหนึ่งในสิ่งเหล่านี้:

input[type=checkbox].MyClass:not(:checked)
input[type=checkbox].MyClass:checked

คุณอาจต้องการเชื่อมต่อกับเหตุการณ์การเปลี่ยนแปลง


1

หรือคุณอาจใช้ทุก ๆ ():

// Cache DOM Lookup
var abc = $(".abc");

// On Click
abc.on("click",function(){

    // Check if all items in list are selected
    if(abc.toArray().every(areSelected)){
        //do something
    }

    function areSelected(element, index, array){
        return array[index].checked;
    }
});

1

ทางออกที่เป็นอิสระในชั้นเรียน

var checkBox = 'input[type="checkbox"]';
if ($(checkBox+':checked').length == $(checkBox).length) {
   //Do Something
}

1

นี่คือวิธีที่ฉันประสบความสำเร็จในรหัสของฉัน:

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.