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


125

ฉันจะตรวจสอบ / ยกเลิกการเลือกเหตุการณ์<input type="checkbox" />ด้วย jQuery ได้อย่างไร


1
หากคุณใช้ JQuery เวอร์ชันที่ค่อนข้างใหม่ฉันจะใช้. on ('change', function () {... }) ตามที่กล่าวไว้ในคำตอบของ @Daniel De Leon ด้านล่าง ข้อได้เปรียบผู้ฟังเหตุการณ์ "เปิด" จะเชื่อมโยงกับ html ที่สร้างขึ้นแบบไดนามิก
BLang

คำตอบ:


172
<input type="checkbox" id="something" />

$("#something").click( function(){
   if( $(this).is(':checked') ) alert("checked");
});

แก้ไข: การดำเนินการนี้จะไม่เกิดขึ้นเมื่อช่องทำเครื่องหมายเปลี่ยนไปด้วยเหตุผลอื่นนอกเหนือจากการคลิกเช่นการใช้แป้นพิมพ์ เพื่อหลีกเลี่ยงปัญหานี้ฟังแทนchangeclick

สำหรับการตรวจสอบ / ยกเลิกการเลือกโดยใช้โปรแกรมให้ดูที่เหตุใดเหตุการณ์การเปลี่ยนแปลงช่องทำเครื่องหมายของฉันจึงไม่ถูกทริกเกอร์


document.getElementById ('something') ตรวจสอบแล้วทำไม $ ('# something') ตรวจสอบไม่ทำงาน
omg

รหัสของคุณไม่มี paran และควรใช้วิธี jQuery ในการรับสถานะการตรวจสอบ
Pete Michaud

2
Shore: เหตุผลที่ getElementById ทำงานคือส่งคืนองค์ประกอบ DOM ในขณะที่ฟังก์ชัน $ jQuery ส่งคืนวัตถุ jQuery วัตถุ jQuery มีองค์ประกอบ DOM เป็นคุณสมบัติ แต่ไม่ใช่วัตถุ DOM ในตัวเอง
Pete Michaud

3
ฉันรู้ว่าฉันมางานปาร์ตี้ช้า แต่จะใช้ได้ก็ต่อเมื่อเหตุการณ์ "คลิก" ทริกเกอร์สิ่งนี้ หากด้วยเหตุผลบางประการคุณต้องทำสิ่งนี้ที่อื่นในโค้ด: $ ("# something"). attr ("checked", "checked") เหตุการณ์คลิกจะไม่ถูกทริกเกอร์
David Stinemetze

3
@DavidStinemetze: ฉันจะบอกว่าคุณสามารถฟังตันchangeแทนที่จะคลิก ฉันกำลังอัปเดตคำตอบ
marcgg

44

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

ฉันคิดว่าควรใช้ฟังก์ชัน. change () ดีกว่า

<input type="checkbox" id="something" />

$("#something").change( function(){
  alert("state changed");
});

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

26

ใช้:ตัวเลือกที่เลือกเพื่อกำหนดสถานะของช่องทำเครื่องหมาย:

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});


4

ใช้ข้อมูลโค้ดด้านล่างเพื่อดำเนินการนี้:

$('#checkAll').click(function(){
  $("#checkboxes input").attr('checked','checked');
});

$('#UncheckAll').click(function(){
  $("#checkboxes input").attr('checked',false);
});

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

$('#checkAll').click(function(e) {
  if($('#checkAll').attr('checked') == 'checked') {
    $("#checkboxes input").attr('checked','checked');
    $('#checkAll').val('off');
  } else {
    $("#checkboxes input").attr('checked', false);
    $('#checkAll').val('on'); 
  }
});

สำหรับการสาธิต: http://jsfiddle.net/creativegala/hTtxe/


3

จากประสบการณ์ของฉันฉันต้องใช้ประโยชน์จาก currentTarget ของเหตุการณ์:

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});

3

รหัสนี้ตอบสนองความต้องการของคุณ:

<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});

นอกจากนี้คุณสามารถตรวจสอบได้ในjsfiddle


2

ใช้เหตุการณ์คลิกเพื่อให้เข้ากันได้ดีที่สุดกับ MSIE

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});

จะตัดสินได้อย่างไรว่าถูกตรวจสอบหรือไม่?
omg

ฉันต้องการทราบว่าการคลิกหมายถึงการเลือกหรือยกเลิกการเลือก
omg

1
จากนั้นคุณสามารถใช้ $ (this) .is (': checked') เพื่อทดสอบสถานะของรายการที่คลิกเพียงครั้งเดียว
Ty W

-1
$(document).ready(function(){
    checkUncheckAll("#select_all","[name='check_boxes[]']");
});

var NUM_BOXES = 10;
// last checkbox the user clicked
var last = -1;
function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  event = event || window.event;

  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
    var di = num > last ? 1 : -1;
    for (var i = last; i != num; i += di)
      document.forms.boxes['box[' + i + ']'].checked = true;
  }
  last = num;
}
function init() {
  for (var i = 0; i < NUM_BOXES; i++)
    document.forms.boxes['box[' + i + ']'].onclick = check;
}

HTML:

<body onload="init()">
  <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
  </form>
</body>

15
เฮ้! เพื่อนคุณมาทำอะไรที่นี่?
omg

ดูเหมือนการเลือกช่วง (เช่นตรวจสอบรายการแรกกดเลื่อนลงตรวจสอบรายการสุดท้ายและรายการทั้งหมดที่อยู่ระหว่างจะถูกตรวจสอบ) อย่างไรก็ตามนี่เป็นมากกว่าคำถามที่ถามหา ไม่มีรหัสบางอย่างเช่น checkUncheckAll ()
joelsand
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.