ฉันต้องการทำสิ่งนี้เพื่อทำเครื่องหมายcheckboxใช้jQuery :

$(".myCheckBox").checked(true);

หรือ

$(".myCheckBox").selected(true);

สิ่งนั้นมีอยู่จริงหรือไม่?

jQuery ที่ทันสมัย

ใช้.prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

DOM API

หากคุณทำงานกับองค์ประกอบเดียวคุณสามารถเข้าถึงคุณสมบัติพื้นฐานHTMLInputElementและปรับเปลี่ยน.checkedคุณสมบัติได้เสมอ:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

ประโยชน์ที่จะใช้.prop()และ.attr()วิธีการแทนสิ่งนี้คือมันจะทำงานกับองค์ประกอบที่ตรงกันทั้งหมด

jQuery 1.5.x และต่ำกว่า

เป็นวิธีการที่ไม่สามารถใช้ได้ดังนั้นคุณจำเป็นต้องใช้.prop().attr()

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

โปรดทราบว่านี่เป็นวิธีการที่ใช้โดยการทดสอบหน่วยของ jQuery ก่อนรุ่น 1.6และเป็นที่นิยมใช้$('.myCheckbox').removeAttr('checked');ตั้งแต่หลังหากกล่องถูกตรวจสอบครั้งแรกเปลี่ยนพฤติกรรมของการโทรไปยัง.reset()ในรูปแบบใด ๆ ที่มีมัน - บอบบาง แต่อาจ การเปลี่ยนแปลงพฤติกรรมที่ไม่พึงประสงค์

สำหรับบริบทมากขึ้นบางอภิปรายไม่สมบูรณ์ของการเปลี่ยนแปลงการจัดการของcheckedแอตทริบิวต์ / คุณสมบัติในการเปลี่ยนแปลงจาก 1.5.x 1.6 ที่สามารถพบได้ในรุ่น 1.6 บันทึกประจำรุ่นและแอตทริบิวต์เทียบกับคุณสมบัติส่วนหนึ่งของเอกสาร.prop()

ใช้:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

และถ้าคุณต้องการตรวจสอบว่ามีการทำเครื่องหมายที่ช่องทำเครื่องหมายหรือไม่:

$('.myCheckbox').is(':checked');

นี่เป็นวิธีที่ถูกต้องในการตรวจสอบและยกเลิกการเลือกช่องทำเครื่องหมายด้วย jQuery เนื่องจากเป็นมาตรฐานข้ามแพลตฟอร์มและจะอนุญาตการโพสต์แบบฟอร์มอีกครั้ง

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

ด้วยการทำเช่นนี้คุณกำลังใช้มาตรฐาน JavaScript ในการตรวจสอบและยกเลิกการทำเครื่องหมายที่ช่องทำเครื่องหมายดังนั้นเบราว์เซอร์ใด ๆ ที่ใช้คุณสมบัติ "ตรวจสอบ" ขององค์ประกอบช่องทำเครื่องหมายอย่างถูกต้องจะเรียกใช้โค้ดนี้อย่างไม่มีที่ติ นี่ควรเป็นเบราว์เซอร์หลักทั้งหมด แต่ฉันไม่สามารถทดสอบก่อนหน้านี้กับ Internet Explorer 9

ปัญหา (jQuery 1.6):

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

นี่คือตัวอย่างของแอตทริบิวต์ช่องทำเครื่องหมายไม่ทำงานหลังจากที่มีคนคลิกช่องทำเครื่องหมาย (เกิดขึ้นใน Chrome)

ซอ

การแก้ไขปัญหา:

ด้วยการใช้คุณสมบัติ "ตรวจสอบ" ของ JavaScript บนองค์ประกอบDOMเราสามารถแก้ไขปัญหาได้โดยตรงแทนที่จะพยายามจัดการ DOM เพื่อทำสิ่งที่เราต้องการให้ทำ

ซอ

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

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

อีกทางเลือกหนึ่งถ้าคุณไม่ต้องการใช้ปลั๊กอินคุณสามารถใช้ข้อมูลโค้ดต่อไปนี้:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

คุณทำได้

$('.myCheckbox').attr('checked',true) //Standards compliant

หรือ

$("form #mycheckbox").attr('checked', true)

หากคุณมีรหัสที่กำหนดเองในเหตุการณ์ onclick สำหรับช่องทำเครื่องหมายที่คุณต้องการดำเนินการให้ใช้รหัสนี้แทน:

$("#mycheckbox").click();

คุณสามารถยกเลิกการเลือกได้โดยลบแอตทริบิวต์ทั้งหมด:

$('.myCheckbox').removeAttr('checked')

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

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

คุณสามารถขยายวัตถุ $ .fn ด้วยวิธีการใหม่ได้:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

จากนั้นคุณสามารถทำได้:

$(":checkbox").check();
$(":checkbox").uncheck();

หรือคุณอาจต้องการให้ชื่อที่ไม่ซ้ำกันมากขึ้นเช่น mycheck () และ myuncheck () ในกรณีที่คุณใช้ไลบรารีอื่นที่ใช้ชื่อเหล่านั้น

$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

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

หากต้องการทำเครื่องหมายในช่องคุณควรใช้

 $('.myCheckbox').attr('checked',true);

หรือ

 $('.myCheckbox').attr('checked','checked');

และหากต้องการยกเลิกการทำเครื่องหมายในช่องคุณควรตั้งค่าเป็นเท็จเสมอ:

 $('.myCheckbox').attr('checked',false);

ถ้าคุณทำ

  $('.myCheckbox').removeAttr('checked')

มันลบคุณลักษณะทั้งหมดเข้าด้วยกันและดังนั้นคุณจะไม่สามารถรีเซ็ตแบบฟอร์ม

BAD DEMO jQuery 1.6 ฉันคิดว่านี่มันพัง สำหรับ 1.6 ฉันจะสร้างโพสต์ใหม่ในเรื่องนั้น

ใหม่สาธิตการทำงาน jQuery 1.5.2 ใช้งานได้ใน Chrome

ทั้งการสาธิตใช้

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

นี่เป็นการเลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุพร้อมค่าที่มีสตริงย่อยที่กำหนด "ckbItem":

$('input[name *= ckbItem]').prop('checked', true);

มันจะเลือกองค์ประกอบทั้งหมดที่มี ckbItem ในแอตทริบิวต์ชื่อ

สมมติว่าคำถามคือ ...

ฉันจะตรวจสอบช่องทำเครื่องหมายตั้งค่าVALUE ได้อย่างไร

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

คำตอบของซีอานสามารถขยายได้ด้วยตัวเลือกที่เฉพาะเจาะจงมากขึ้นโดยใช้บรรทัดของรหัสต่อไปนี้:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

ฉันไม่มีทางแก้ไข ฉันจะใช้เสมอ:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

ในการทำเครื่องหมายในช่องทำเครื่องหมายโดยใช้jQuery 1.6หรือสูงกว่าให้ทำดังนี้

checkbox.prop('checked', true);

หากต้องการยกเลิกการเลือกให้ใช้:

checkbox.prop('checked', false);

นี่คือสิ่งที่ฉันต้องการใช้เพื่อสลับช่องทำเครื่องหมายโดยใช้ jQuery:

checkbox.prop('checked', !checkbox.prop('checked'));

หากคุณใช้jQuery 1.5หรือต่ำกว่า:

checkbox.attr('checked', true);

หากต้องการยกเลิกการเลือกให้ใช้:

checkbox.attr('checked', false);

นี่คือวิธีการทำโดย jQuery

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);

<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>

นี่คือรหัสสำหรับการตรวจสอบและไม่เลือกด้วยปุ่ม:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

อัปเดต: นี่คือบล็อกรหัสเดียวกันโดยใช้วิธี prop Jquery 1.6+ ที่ใหม่กว่าซึ่งแทนที่ attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});

ลองสิ่งนี้:

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking

เราสามารถใช้elementObjectกับ jQuery เพื่อรับการตรวจสอบคุณสมบัติ:

$(objectElement).attr('checked');

เราสามารถใช้สิ่งนี้สำหรับ jQuery ทุกรุ่นโดยไม่มีข้อผิดพลาด

อัปเดต: Jquery 1.6+ มีวิธีการ prop แบบใหม่ซึ่งแทนที่ attr เช่น:

$(objectElement).prop('checked');

หากคุณใช้PhoneGap ในการพัฒนาแอพพลิเคชั่นและคุณมีค่าที่ปุ่มที่คุณต้องการแสดงทันทีอย่าลืมทำสิ่งนี้

$('span.ui-[controlname]',$('[id]')).text("the value");

ฉันพบว่าหากไม่มีการขยายส่วนต่อประสานจะไม่อัปเดตไม่ว่าคุณจะทำอะไร

นี่คือรหัสและตัวอย่างสำหรับวิธีตรวจสอบกล่องกาเครื่องหมายหลายกล่อง

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});

ทางออกที่เป็นไปได้อื่น:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

ในฐานะ @ livefree75 กล่าวว่า:

jQuery 1.5.x และต่ำกว่า

คุณสามารถขยายวัตถุ $ .fn ด้วยวิธีการใหม่ได้:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

แต่ใน jQuery รุ่นใหม่เราต้องใช้สิ่งนี้:

jQuery 1.6+

    (function($)  {
       $.fn.extend({
          check : function()  {
             return this.filter(":radio, :checkbox").prop("checked", true);
          },
          uncheck : function()  {
             return this.filter(":radio, :checkbox").prop("checked",false);
          }
       });
    }(jQuery));

จากนั้นคุณสามารถทำได้:

    $(":checkbox").check();
    $(":checkbox").uncheck();

หากใช้อุปกรณ์พกพาและคุณต้องการให้อินเทอร์เฟซอัปเดตและแสดงช่องทำเครื่องหมายว่าไม่เลือกให้ใช้รายการต่อไปนี้:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

ระวังหน่วยความจำรั่วใน Internet Explorer ก่อนInternet Explorer 9เนื่องจากเอกสารคู่มือjQuery ระบุ :

ใน Internet Explorer ก่อนหน้ารุ่น 9 การใช้. prop () เพื่อตั้งค่าคุณสมบัติองค์ประกอบ DOM ให้เป็นอย่างอื่นนอกเหนือจากค่าดั้งเดิมอย่างง่าย (หมายเลขสตริงหรือบูลีน) สามารถทำให้เกิดการรั่วไหลของหน่วยความจำได้หากคุณสมบัติไม่ถูกลบออก )) ก่อนที่องค์ประกอบ DOM จะถูกลบออกจากเอกสาร หากต้องการตั้งค่าอย่างปลอดภัยบนวัตถุ DOM โดยไม่มีการรั่วไหลของหน่วยความจำให้ใช้. data ()

สำหรับ jQuery 1.6+

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

สำหรับ jQuery 1.5.x และต่ำกว่า

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

เพื่อตรวจสอบ,

$('.myCheckbox').removeAttr('checked');

เพื่อตรวจสอบและยกเลิกการเลือก

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

นี่อาจเป็นทางออกที่สั้นและง่ายที่สุด:

$(".myCheckBox")[0].checked = true;

หรือ

$(".myCheckBox")[0].checked = false;

ยิ่งสั้นลงก็จะเป็น:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

นี่คือjsFiddleเช่นกัน

JavaScript ธรรมดานั้นง่ายมากและมีค่าใช้จ่ายน้อยกว่ามาก:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

ตัวอย่างที่นี่

ฉันไม่สามารถใช้งานได้โดยใช้:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

ทั้งจริงและเท็จจะทำเครื่องหมายในช่อง สิ่งที่ทำงานให้ฉันคือ:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

เมื่อคุณทำเครื่องหมายในช่องเช่น;

$('.className').attr('checked', 'checked')

มันอาจจะไม่เพียงพอ คุณควรเรียกใช้ฟังก์ชันด้านล่าง

$('.className').prop('checked', 'true')

โดยเฉพาะอย่างยิ่งเมื่อคุณลบช่องทำเครื่องหมายตรวจสอบคุณสมบัติ

นี่คือคำตอบที่สมบูรณ์ โดยใช้ jQuery

ฉันทดสอบและใช้งานได้ 100%: D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $(':checkbox:checked').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });

ใน jQuery

if($("#checkboxId").is(':checked')){
    alert("Checked");
}

หรือ

if($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

ในจาวาสคริปต์

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}