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

ฉันต้องการให้เหตุการณ์ดำเนินการด้านไคลเอ็นต์เมื่อทำเครื่องหมายที่ช่องทำเครื่องหมาย / ไม่เลือก:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

โดยทั่วไปฉันต้องการให้เกิดขึ้นสำหรับทุกช่องในหน้า วิธีการนี้เป็นการยิงที่คลิกและตรวจสอบสถานะ ok

ฉันคิดว่าต้องมีวิธี jQuery ที่สะอาดกว่า ใครรู้วิธีแก้ปัญหา?

เชื่อมโยงกับเหตุการณ์แทนchange clickอย่างไรก็ตามคุณอาจจะต้องตรวจสอบว่ามีการทำเครื่องหมายที่ช่องทำเครื่องหมายหรือไม่:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

ประโยชน์หลักของการเชื่อมโยงกับchangeเหตุการณ์ในclickกิจกรรมคือการคลิกที่ไม่ได้ทำเครื่องหมายในช่องจะทำให้สถานะเปลี่ยนไป หากคุณต้องการจับภาพเหตุการณ์ที่ทำให้ช่องทำเครื่องหมายเปลี่ยนสถานะคุณต้องการให้changeเหตุการณ์ที่มีชื่อ aptly Redacted ในความคิดเห็น

นอกจากนี้โปรดทราบว่าฉันใช้this.checkedแทนการห่อองค์ประกอบในวัตถุ jQuery และใช้วิธีการ jQuery เพียงเพราะมันสั้นและเร็วกว่าในการเข้าถึงคุณสมบัติขององค์ประกอบ DOM โดยตรง

แก้ไข (ดูความคิดเห็น)

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

$(":checkbox")

หรือคุณสามารถใช้แอตทริบิวต์เท่ากับตัวเลือก:

$("input[type='checkbox']")

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

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

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

ตัวอย่างด้านล่างแสดงวิธีที่เหตุการณ์ของโหนด dom ที่เพิ่มแบบไดนามิกไม่ทริกเกอร์ผู้ฟังที่กำหนดไว้ก่อนหน้านี้

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

ในขณะที่ตัวอย่างนี้แสดงการใช้งานของการมอบหมายเหตุการณ์ในการจับภาพเหตุการณ์สำหรับโหนดที่เฉพาะเจาะจง ( h1ในกรณีนี้) และออกโทรกลับสำหรับเหตุการณ์ดังกล่าว

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

อีกวิธีหนึ่ง

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

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

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

    })
})

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

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

    })
})

หากคุณต้องการให้มันทำงานเฉพาะเมื่อมีการตรวจสอบ (จากการไม่ทำเครื่องหมาย) ดังนั้น @James Allardice จะตอบคำถามข้างต้น

BTW input[type='checkbox']:checkedเป็นตัวเลือก CSS

$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});

การดำเนินการตามกิจกรรม (คลิกที่เหตุการณ์)

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

ไม่มีเหตุการณ์ที่ต้องดำเนินการตามสถานะปัจจุบัน

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

บางทีนี่อาจเป็นทางเลือกสำหรับคุณ

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

นี่คือวิธีการแก้ปัญหาในการค้นหาคือช่องทำเครื่องหมายถูกทำเครื่องหมายหรือไม่ ใช้ฟังก์ชัน #prop () //

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

ลองใช้การตรวจสอบ jQuery นี้

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>

ง่ายมากนี่คือวิธีที่ฉันใช้:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

ความนับถือ!