Użycie:

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

I jeśli chcesz sprawdzić, czy pole wyboru jest zaznaczone, czy nie:

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

Jest to poprawny sposób sprawdzania i odznaczania checkboxów za pomocą jQuery, ponieważ jest to standard wieloplatformowy, a zezwala na reposty formularzy.

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

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

W ten sposób używasz standardów JavaScript do sprawdzania i odznaczania checkboxów, więc każda przeglądarka, która poprawnie implementuje właściwość "checked" elementu checkbox, uruchomi ten kod bezbłędnie. To powinno BYĆ wszystkie główne przeglądarki, ale nie jestem w stanie przetestować przed Internet Explorer 9.

Problem (jQuery 1.6):

Gdy użytkownik kliknie na checkbox, to checkbox przestaje odpowiadać na zmiany atrybutów "checked".

Oto przykład, że atrybut checkbox nie wykonuje zadania po tym, jak ktoś kliknął pole wyboru (dzieje się tak w Chrome).

Fiddle

Rozwiązanie:

Używając właściwości "checked" JavaScript na elementach DOM , możemy są w stanie rozwiązać problem bezpośrednio, zamiast próbować manipulować DOM do zrobienia tego, co chcemy to zrobić.

Fiddle

Ta wtyczka zmieni właściwość checked wszystkich elementów wybranych przez jQuery i pomyślnie zaznacz i odznacz pola wyboru we wszystkich okolicznościach. Tak więc, chociaż może to wydawać się rozwiązaniem nadmiernie obciążającym, poprawi to wrażenia użytkownika witryny i pomoże zapobiec frustracji użytkowników.

(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 );

Alternatywnie, jeśli nie chcesz używać wtyczki, możesz użyć następujących fragmentów kodu:

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

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

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

You can do

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

Lub

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

Jeśli w zdarzeniu onclick masz własny kod dla pola wyboru, które chcesz uruchomić, użyj tego:

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

Możesz odznaczyć, usuwając atrybut CAŁKOWICIE:

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

Możesz sprawdzić wszystkie pola tak:

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

Możesz również rozszerzyć $.obiekt fn z nowymi metodami:

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

Wtedy możesz po prostu zrobić:

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

Lub możesz nadać im więcej unikalnych nazw, takich jak mycheck () i myuncheck (), jeśli używasz innej biblioteki, która używa tych nazw.

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

Ostatni odpali Zdarzenie click dla checkboxa, Pozostałe nie. Jeśli więc w zdarzeniu onclick masz kod niestandardowy dla pola wyboru, które chcesz uruchomić, użyj ostatniego.

Aby zaznaczyć pole wyboru należy użyć

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

Lub

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

I aby odznaczyć pole wyboru, należy zawsze ustawić je na false:

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

If you do

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

Usuwa wszystkie atrybuty razem i dlatego nie będzie można zresetować formularza.

Złe DEMO jQuery 1.6 . Myślę, że to jest zepsute. Dla 1.6 zamierzam zrobić nowy post na ten temat.

Nowe DEMO jQuery 1.5.2 Działa w Chrome.

Oba dema użycie

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

To wybiera elementy, które mają określony atrybut z wartością zawierającą podany podłańcuch "ckbItem":

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

Wybierze wszystkie elementy, które zawierają ckbItem w atrybucie name.

Zakładając, że pytanie jest...

Jak sprawdzić checkbox-set by VALUE?

Pamiętaj, że w typowym zestawie checkboxów wszystkie znaczniki wejściowe mają tę samą nazwę, różnią się atrybutem value: nie ma ID dla każdego wejścia zestawu.

Odpowiedź Xiana można rozszerzyć o bardziej szczegółowy selektor , używając następującego wiersza kodu:

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

Brakuje mi rozwiązania. Zawsze używam:

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

Aby sprawdzić pole wyboru używając jQuery 1.6 lub wyższego, po prostu zrób to:

checkbox.prop('checked', true);

Aby odznaczyć, użyj:

checkbox.prop('checked', false);

Oto, czego lubię używać do przełączania pola wyboru za pomocą jQuery:

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

Jeśli używasz jQuery 1.5 lub mniej:

checkbox.attr('checked', true);

Aby odznaczyć, użyj:

checkbox.attr('checked', false);

Oto sposób, aby to zrobić bez 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>

Oto kod zaznaczony i niezaznaczony przyciskiem:

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;
    });
});

Update: tutaj znajduje się ten sam blok kodu przy użyciu nowszej metody Jquery 1.6 + prop, która zastępuje 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;
    });
});

Spróbuj tego:

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

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

Możemy użyć elementObject z jQuery do sprawdzenia atrybutu:

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

Możemy użyć tego dla wszystkich wersji jQuery bez żadnego błędu.

Update: Jquery 1.6 + posiada nową metodę prop, która zastępuje attr, np.:

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

Jeśli używasz PhoneGap do tworzenia aplikacji i masz wartość na przycisku, który chcesz natychmiast pokazać, pamiętaj, aby to zrobić

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

Odkryłem, że bez span, interfejs nie będzie aktualizowany bez względu na to, co zrobisz.

Oto kod i demo, jak sprawdzić wiele pól wyboru...

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;
        }
    }
});

Inne możliwe rozwiązanie:

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

Jak powiedział @ livefree75:

JQuery 1.5x i poniżej

Możesz również rozszerzyć $.obiekt fn z nowymi metodami:

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

Ale w nowych wersjach jQuery musimy użyć czegoś takiego:

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));

Wtedy możesz po prostu zrobić:

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

Jeśli używasz urządzenia mobilnego i chcesz, aby interfejs był aktualizowany i wyświetlał pole wyboru jako niezaznaczone, użyj następującego polecenia:

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

Należy pamiętać o wyciekach pamięci w Internet Explorerze przed Internet Explorer 9, Jak stwierdza Dokumentacja jQuery :

W Internet Explorerze przed wersją 9, za pomocą .prop () do Ustawienia DOM właściwość elementu do niczego innego niż prosta prymitywna wartość (number, string lub boolean) może powodować wycieki pamięci, jeśli właściwość jest Nie usuwane (za pomocą .removeProp ()) przed usunięciem elementu DOM z dokumentu. Aby bezpiecznie ustawiać wartości w obiektach DOM bez pamięci przecieki, użycie .data ().

Dla jQuery 1.6 +

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

Dla jQuery 1.5.x i poniżej

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

Aby sprawdzić,

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

Aby sprawdzić i odznaczyć

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

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

Jest to prawdopodobnie najkrótsze i najłatwiejsze rozwiązanie:

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

Lub

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

Jeszcze krótszy byłby:

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

Oto a jsFiddle też.

Zwykły JavaScript jest bardzo prosty i znacznie mniej narzutowy:

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

Przykład tutaj

Nie mogłem go uruchomić używając:

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

Zarówno true, jak i false zaznaczą pole wyboru. U mnie działało:

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

Po zaznaczeniu checkboxa typu;

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

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

Szczególnie po usunięciu atrybutu checkbox checked.

Oto pełna odpowiedź używanie jQuery

Testuję i działa na 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
    });

W przypadku użycia ASP.NET MVC, generuje wiele checkboxów, a później ma aby zaznaczyć / odznaczyć wszystkie za pomocą JavaScript można wykonać następujące czynności.

HTML

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

JavaScript

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }