Chciałbym zrobić coś takiego, aby zaznaczyć checkboxużywającą jQuery :

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

lub

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

Czy coś takiego istnieje?

Nowoczesne jQuery

Użyj .prop():

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

DOM API

Jeśli pracujesz tylko z jednym elementem, zawsze możesz uzyskać dostęp do instrumentu bazowego HTMLInputElementi zmodyfikować jego .checkedwłaściwość:

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

Korzyścią z używania metod .prop()i .attr()zamiast tego jest to, że będą działać na wszystkich dopasowanych elementach.

jQuery 1.5.xi nowsze

Ta .prop()metoda nie jest dostępna, więc musisz jej użyć .attr().

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

Zauważ, że jest to podejście stosowane w testach jednostkowych jQuery przed wersją 1.6 i jest lepsze niż użycie, $('.myCheckbox').removeAttr('checked');ponieważ ta ostatnia, jeśli pole zostało początkowo zaznaczone, zmieni zachowanie wywołania .reset()w dowolnej formie, która go zawiera - subtelne, ale prawdopodobnie niepożądana zmiana zachowania.

Aby uzyskać więcej informacji, niektóre niepełne omówienie zmian w obsłudze checkedatrybutu / właściwości w przejściu z wersji 1.5.x na wersję 1.6 można znaleźć w informacjach o wersji 1.6 oraz w sekcji Dokumentacja kontra atrybuty ..prop()

Posługiwać się:

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

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

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

Jest to poprawny sposób sprawdzania i odznaczając pola wyboru z jQuery, jak to jest standard cross-platform, i będzie dopuszczać reposts formularza.

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

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

Robiąc to, używasz standardów JavaScript do zaznaczania i odznaczania pól wyboru, więc każda przeglądarka, która poprawnie implementuje właściwość „zaznaczone” elementu pola wyboru, uruchomi ten kod bezbłędnie. To powinno być wszystkich głównych przeglądarek, ale nie jestem w stanie przetestować poprzedni Internet Explorer 9.

Problem (jQuery 1.6):

Gdy użytkownik kliknie pole wyboru, to pole wyboru przestaje odpowiadać na zmiany atrybutu „zaznaczone”.

Oto przykład atrybutu checkbox, który nie wykonał zadania po tym, jak ktoś kliknął pole wyboru (dzieje się tak w Chrome).

Skrzypce

Rozwiązanie:

Korzystając z właściwości JavaScript „zaznaczonej” w elementach DOM , jesteśmy w stanie rozwiązać problem bezpośrednio, zamiast próbować zmanipulować DOM do robienia tego, co chcemy .

Skrzypce

Ta wtyczka zmieni właściwość zaznaczenia dowolnych elementów wybranych przez jQuery oraz pomyślnie zaznaczy i odznacz pola wyboru we wszystkich okolicznościach. Chociaż może się to wydawać nadmiernym obciążeniem, poprawi komfort korzystania z witryny i zapobiegnie 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;
});

Możesz to zrobić

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

lub

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

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

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

Możesz odznaczyć, usuwając całkowicie atrybut:

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

Możesz zaznaczyć wszystkie pola wyboru w ten sposób:

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

Możesz także rozszerzyć obiekt $ .fn o nowe metody:

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

Następnie możesz po prostu zrobić:

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

Możesz też nadać im więcej unikalnych nazw, takich jak mycheck () i myuncheck () na wypadek, gdybyś używał innej biblioteki, która używa tych nazw.

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

Ostatni wywoła zdarzenie kliknięcia dla pola wyboru, pozostałe nie. Więc jeśli masz niestandardowy kod w zdarzeniu onclick 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, zawsze należy ustawić na false:

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

Jeśli zrobisz

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

usuwa atrybut razem i dlatego nie będzie można zresetować formularza.

ZŁY DEMO jQuery 1.6 . Myślę, że to jest zepsute. Dla 1.6 zamierzam napisać o tym nowy post.

NOWA WERSJA DEMO jQuery 1.5.2 działa w Chrome.

Oba dema używają

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

Wybiera elementy, które mają określony atrybut o wartości zawierającej podany podciąg „ckbItem”:

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

Wybiera wszystkie elementy, które zawierają atrybut ckbItem w swoim atrybucie nazwy.

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

Jak mogę zaznaczyć pole wyboru WEDŁUG WARTOŚCI?

Pamiętaj, że w typowym zestawie pól wyboru wszystkie znaczniki wejściowe mają tę samą nazwę, różnią się atrybutemvalue : dla każdego wejścia zestawu nie ma identyfikatora.

Odpowiedź Xiana można rozszerzyć za pomocą bardziej szczegółowego selektora , używając następującego wiersza kodu:

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

Brakuje mi rozwiązania. Zawsze będę używać:

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

Aby zaznaczyć pole wyboru przy użyciu jQuery 1.6 lub wyższej, po prostu wykonaj następujące czynności:

checkbox.prop('checked', true);

Aby odznaczyć, użyj:

checkbox.prop('checked', false);

Oto, co 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 nowszej:

checkbox.attr('checked', true);

Aby odznaczyć, użyj:

checkbox.attr('checked', false);

Oto sposób na zrobienie tego 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 za pomocą przycisku:

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

Aktualizacja: Oto ten sam blok kodu przy użyciu nowszej metody prop Jquery 1.6+, 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ć elementObjectz jQuery do sprawdzenia atrybutu:

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

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

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

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

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

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

Odkryłem, że bez zakresu interfejs nie aktualizuje się bez względu na to, co robisz.

Oto kod i wersja demonstracyjna sprawdzania wielu 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.5.xi nowsze

Możesz także rozszerzyć obiekt $ .fn o nowe metody:

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

Następnie możesz po prostu zrobić:

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

Jeśli używasz telefonu komórkowego i chcesz, aby interfejs się zaktualizował i wyświetlał pole wyboru jako niezaznaczone, użyj następujących poleceń:

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

Uważaj na wycieki pamięci w Internet Explorerze wcześniejszym niż Internet Explorer 9 , ponieważ dokumentacja jQuery mówi :

W programie Internet Explorer wcześniejszym niż wersja 9 użycie .prop () w celu ustawienia właściwości elementu DOM na wartość inną niż prosta wartość pierwotna (liczba, łańcuch lub wartość logiczna) może powodować wycieki pamięci, jeśli właściwość nie zostanie usunięta (użycie .removeProp ( )) przed usunięciem elementu DOM z dokumentu. Aby bezpiecznie ustawić wartości dla obiektów DOM bez wycieków pamięci, użyj .data ().

Dla jQuery 1.6+

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

Dla jQuery 1.5.xi niższych

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

Sprawdzić,

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

Aby zaznaczyć 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 także jsFiddle .

Zwykły JavaScript jest bardzo prosty i znacznie mniejszy:

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ć przy użyciu:

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

Zarówno prawda, jak i fałsz zaznaczałyby pole wyboru. Dla mnie zadziałało:

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

Po zaznaczeniu pola wyboru, takiego jak;

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

to może nie wystarczyć. Powinieneś także wywołać funkcję poniżej;

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

Zwłaszcza po usunięciu atrybutu zaznaczonego pola wyboru.

Oto pełna odpowiedź przy użyciu jQuery

Testuję to i działa w 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 jQuery

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

lub

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

W JavaScript

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