jQuery ดูว่ามีการเลือกช่องทำเครื่องหมายหรือไม่

126

ฉันรู้วิธีดูว่ามีการเลือกช่องทำเครื่องหมายแต่ละช่องหรือไม่

แต่ฉันมีปัญหากับสิ่งต่อไปนี้ - ได้รับรหัสแบบฟอร์มฉันต้องการดูว่ามีการเลือกช่องทำเครื่องหมายใด (เช่น 1 หรือมากกว่า) และฉันต้องดูว่าไม่มีการเลือกไว้หรือไม่ โดยพื้นฐานแล้วฉันต้องการฟังก์ชั่นแยกต่างหากที่ตอบคำถามสองข้อนี้ ความช่วยเหลือจะได้รับการชื่นชม ขอบคุณ!

อันที่จริงฉันแค่ต้องการฟังก์ชั่นเพื่อบอกว่าไม่มีการเลือกไว้ การรู้สิ่งนี้จะตอบคำถามอื่น ๆ

javascript jquery forms

— BBA
แหล่งที่มา

stackoverflow.com/questions/901712/…

— Adrien เข้า

246

คุณสามารถใช้สิ่งนี้ได้

if ($("#formID input:checkbox:checked").length > 0)
{
    // any one is checked
}
else
{
   // none is checked
}

— ราหุล
แหล่งที่มา

8

$("#formID input:checkbox:checked").lengthที่นี่ก็เพียงพอเช่นกัน

— Damon

@Damon ฉันเดาว่าคุณหมายถึงif ($("#formID input:checkbox:checked").length){}(หากไม่มี>0) ก็เพียงพอแล้วเพราะ 0 เป็นค่าเท็จ

— Adrien Be

11

jQuery กล่าวเกี่ยวกับ:checkboxตัวเลือก: For better performance in modern browsers, use [type="checkbox"]ดูapi.jquery.com/checkbox-selector - เช่นเดียวกับ radiobuttons btw, use [type="radio"] rather than :radio api.jquery.com/radio-selector

— Adrien Be

27

JQuery .isจะทดสอบองค์ประกอบที่ระบุทั้งหมดและส่งคืนจริงหากอย่างน้อยหนึ่งในนั้นตรงกับตัวเลือก:

if ($(":checkbox[name='choices']", form).is(":checked"))
{
    // one or more checked
}
else
{
    // nothing checked
}

— Michael Logutov
แหล่งที่มา

แม้ว่าis()ดูเหมือนจะได้ผล แต่การมี:checkedตัวเลือกโดยตรงตามที่ระบุไว้ในคำตอบของ @rahul นั้นเหมาะสมกว่า คือ () ดูเหมือนว่ามีประโยชน์มากขึ้นเมื่อ "เรียกกลับภายใน" ดูapi.jquery.com/is หรือฉันขาดอะไรไป?

— Adrien Be

ไม่มันเป็นสิ่งที่เขียนในเอกสาร - คุณตรวจสอบว่าองค์ประกอบตรงกับแอตทริบิวต์ที่ระบุหรือไม่ ใช้เป็นตัวกรองจากนั้นตรวจสอบว่าคุณได้รับอย่างน้อยหนึ่งรายการในผลลัพธ์เหมือนกัน แต่ imo ยาวกว่าและไม่แสดงออก

— Michael Logutov

+1 สำหรับความจริงที่ว่า.is(":checked")ในโซลูชันของคุณแสดงออกได้ชัดเจนกว่า แต่ไม่แน่ใจเกี่ยวกับส่วนที่เหลือ

— Adrien Be

คือ$("form input[type=checkbox]").is(":checked")อาจจะเป็นวิธีการที่ง่ายและทั่วไปมากขึ้น

— Adrien Be

@AdrienBe การใช้isอาจมีประสิทธิภาพที่ดีกว่าเพราะหยุดทันทีที่พบ

— ChrisW

8

คุณสามารถทำได้:

  if ($('#form_id :checkbox:checked').length > 0){
    // one or more checkboxes are checked
  }
  else{
   // no checkboxes are checked
  }

ที่ไหน:

:checkbox ตัวเลือกตัวกรองจะเลือกช่องทำเครื่องหมายทั้งหมด
:checked จะเลือกช่องทำเครื่องหมายที่เลือกไว้
length จะให้จำนวนคนที่เลือกไว้ที่นั่น

— sarfraz
แหล่งที่มา

jQuery กล่าวเกี่ยวกับ:checkboxตัวเลือก: For better performance in modern browsers, use [type="checkbox"]ดูapi.jquery.com/checkbox-selector

— Adrien

6

นี่คือสิ่งที่ฉันใช้ในการตรวจสอบว่าช่องทำเครื่องหมายใด ๆ ในรายการช่องทำเครื่องหมายมีการเปลี่ยนแปลง:

$('input[type="checkbox"]').change(function(){ 

        var itemName = $('select option:selected').text();  

         //Do something.

});

— เจมส์ดริงการ์ด
แหล่งที่มา

6

โดยไม่ต้องใช้ 'ความยาว' คุณสามารถทำได้ดังนี้:

if ($('input[type=checkbox]').is(":checked")) {
      //any one is checked
}
else {
//none is checked
}

— Acheme Paul
แหล่งที่มา

3

คุณสามารถกลับมาง่ายๆได้ที่.lengthนี่:

function areAnyChecked(formID) {
  return !!$('#'+formID+' input[type=checkbox]:checked').length;
}

มองหาช่องทำเครื่องหมายในรูปแบบที่กำหนดดูว่ามี:checkedและส่งคืนtrueหรือไม่ (เนื่องจากความยาวจะเป็น 0) เพื่อให้ชัดเจนขึ้นเล็กน้อยนี่คือเวอร์ชันที่แปลงที่ไม่ใช่บูลีน:

function howManyAreChecked(formID) {
  return $('#'+formID+' input[type=checkbox]:checked').length;
}

สิ่งนี้จะส่งกลับการนับจำนวนที่ตรวจสอบ

— นิคเครเวอร์
แหล่งที่มา

3

คำตอบของราหุลเหมาะกับคำถามของคุณที่สุด อย่างไรก็ตามหากคุณมีกลุ่มของช่องทำเครื่องหมายที่ต้องเลือกและไม่ใช่ช่องทำเครื่องหมายทั้งหมดในแบบฟอร์มของคุณคุณสามารถไปได้

ใส่ชื่อคลาสสำหรับช่องทำเครื่องหมายทั้งหมดที่คุณต้องการตรวจสอบเช่นชื่อคลาสtest_checkและตอนนี้คุณสามารถตรวจสอบได้ว่ามีการเลือกช่องทำเครื่องหมายใดที่เป็นของกลุ่มโดย:

$("#formID .test_check:checked").length > 0

หากส่งคืนtrueสมมติว่ามีการเลือกช่องทำเครื่องหมายตั้งแต่หนึ่งช่องขึ้นไปโดยมีชื่อคลาสtest_checkและไม่มีการตรวจสอบว่าส่งคืนfalseหรือไม่

หวังว่ามันจะช่วยใครบางคน ขอบคุณ :) -

— Rajesh Omanakuttan
แหล่งที่มา

1

นี่เป็นวิธีที่ดีที่สุดในการแก้ปัญหานี้

  if($("#checkbox").is(":checked")){

  // Do something here /////

  };

— อาซีมาห์อามอส
แหล่งที่มา

สวัสดียินดีต้อนรับสู่ StackOverflow บางทีคุณอาจอธิบายคำตอบของคุณได้มากกว่านี้เล็กน้อยเนื่องจากไม่ชัดเจนว่าเหตุใดจึงเป็น "วิธีที่ดีที่สุด" ในการแก้ปัญหา

— dddJewelsbbb