Pytanie Ustawienie "zaznaczone" dla pola wyboru z jQuery?


Chciałbym zrobić coś takiego, żeby zaznaczyć checkbox za pomocą jQuery:

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

lub

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

Czy coś takiego istnieje?


3606
2018-01-08 22:20


pochodzenie


Bardziej szczegółowe (i bardzo użyteczne!) Pytanie "Jak sprawdzić element w zestawie pól wyboru WEDŁUG WARTOŚCI?", Myślę, że możemy również omówić tutaj i poniżej zamieściłem odpowiedź. - Peter Krauss
Sprawdź inne sposoby zrobienia tego za pomocą jQuery tutaj stackoverflow.com/a/22019103/1868660 - Subodh Ghulaxe
Jeśli potrzebujesz zdarzenia onchange, to jest $("#mycheckbox").click(); - HumanInDisguise
"Sprawdzanie czegoś" sugeruje testowanie, więc myślę, że "Zaznaczenie pola wyboru" jest bardziej przejrzystym i lepszym tytułem. - Alireza
rekwizyt(); funkcja jest idealną odpowiedzią. Zobacz definicję funkcji - api.jquery.com/prop - yogihosting


Odpowiedzi:


jQuery 1.6+

Użyj nowego .prop() metoda:

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

jQuery 1.5.x i mniej

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

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

Zauważ, że tak jest podejście stosowane przez testy jednostkowe jQuery przed wersją 1.6 i jest preferowany do używania

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

ponieważ ten ostatni sprawi, że początkowo zaznaczone zostanie pole, zmień zachowanie połączenia .reset() w dowolnej formie, która go zawiera - zmiana subtelna, ale prawdopodobnie niepożądana.

Aby uzyskać więcej informacji, niektóre niepełne omówienie zmian w obsłudze checked atrybut / właściwość w przejściu od 1.5.x do 1.6 można znaleźć w Informacje o wersji 1.6 i Atrybuty kontra właściwości sekcja .prop() dokumentacja.

Dowolna wersja jQuery

Jeśli pracujesz z jednym elementem, zawsze możesz go zmodyfikować HTMLInputElement„s .checked własność:

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

Korzyści z używania .prop() i .attr() zamiast tego metody te działają na wszystkich dopasowanych elementach.


5409
2018-01-08 22:25



@Xian usunięcie zaznaczonego atrybutu uniemożliwia zresetowanie formularza - mcgrailm
Na marginesie, jQuery w wersji 1.6.1 powinno naprawić problem, o którym wspomniałem, abyśmy mogli nadal wracać do używania $ (...). Prop (...) - cwharris
"Jeśli pracujesz z jednym elementem, zawsze będzie on najszybszy w użyciu DOMElement.checked = true"Ale byłoby to znikome, bo to tylko jeden element ... - Tyler Crompton
Jak mówi Tyler, jest to nieznaczna poprawa wydajności. Według mnie kodowanie za pomocą wspólnego API czyni go bardziej czytelnym niż mieszanie natywnego interfejsu API i interfejsów API jQuery. Trzymałbym się z jQuery. - Charlie Kilian
@TylerCrompton - Oczywiście nie dotyczy to wyłącznie wydajności, ale robienia $(element).prop('checked') jest całkowitym marnowaniem pisania. element.checked istnieje i powinien być stosowany w przypadkach, w których już masz element - gnarf


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

624
2018-01-08 22:25



również zaznaczone jest $ (selektor). Sprawdzane jest zaznaczenie - eomeroff
Wypróbowałem ten dokładny kod i nie zadziałało to dla mnie w przypadku zaznaczenia pola wyboru all / select none, które wymaga sprawdzenia i odznaczenia wszystkich oraz sprawdzenia ich stanu. Zamiast tego spróbowałem odpowiedzi Christophera Harrisa i to wystarczyło. - JD Smith
Dlaczego używać "formularza #mycheckbox" zamiast po prostu "#mycheckbox"? Identyfikator jest już unikatowy w całym dokumencie, jest szybszy i łatwiejszy do wybrania go bezpośrednio. - YuriAlbuquerque
@YuriAlbuquerque to był przykład. możesz użyć dowolnego selektora. - bchhun
$ (selector) .checked nie działa. W jQuery nie ma metody "sprawdzonej". - Brendan Byrd


Jest to poprawny sposób sprawdzania i odznaczania pól wyboru przy pomocy jQuery, ponieważ jest to standard oparty na wielu platformach, oraz będzie zezwól na odświeżanie formularza.

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

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

W ten sposób używasz standardów JavaScript do zaznaczania i odznaczania pól wyboru, więc każda przeglądarka, która poprawnie implementuje "sprawdzoną" właściwość elementu checkbox, uruchomi ten kod bezbłędnie. To powinien wszystkie główne przeglądarki, ale nie mogę przetestować poprzedniej wersji przeglądarki Internet Explorer 9.

Problem (jQuery 1.6):

Gdy użytkownik kliknie pole wyboru, to pole wyboru przestaje odpowiadać na "sprawdzone" zmiany atrybutów.

Oto przykład atrybutu checkbox, który nie wykonuje zadania po tym, jak ktoś je posiada kliknięte pole wyboru (dzieje się to w Chrome).

Skrzypce

Rozwiązanie:

Używając "sprawdzonej" właściwości JavaScriptu na DOM elementy, jesteśmy w stanie rozwiązać problem bezpośrednio, zamiast próbować manipulować DOMem w tym, co robimy chcieć to zrobić.

Skrzypce

Ta wtyczka zmieni sprawdzoną właściwość dowolnych elementów wybranych przez jQuery i pomyślnie sprawdzi i odznaczy pola wyboru we wszystkich okolicznościach. Tak więc, chociaż może się wydawać, że jest to rozwiązanie nadmiernie obciążające, zwiększy to wygodę użytkownika i zapobiegnie frustracji użytkownika.

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

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

284
2018-05-06 19:31



W twoim pierwszym przykładzie JSFiddle powinieneś używać removeAttr('checked') zamiast attr('checked', false) - Daniel X Moore
@DanielXMoore, omijasz problem. Przykładem było pokazanie, że po kliknięciu przez użytkownika pola wyboru przeglądarka przestaje odpowiadać checked zmiany atrybutów, bez względu metody użytej do ich zmiany. - cwharris
@ ChristopherHarris OK, masz rację, tęskniłam za tym. Od wersji 1.6 jQuery nie powinieneś jednak używać metody .prop?$('.myCheckBox').prop('checked', true) W ten sposób automatycznie zastosuje się do całego zestawu dopasowanych elementów (tylko przy ustawianiu, pobieranie jest nadal tylko pierwszym) - Daniel X Moore
Tak. prop to zdecydowanie właściwy sposób ustawiania atrybutów na elemencie. - cwharris
Ładna mała wtyczka, dzięki! Aby zachować łaocuchowość, dodaj "zwróć to" tuż przed końcem wtyczki. - JD Smith


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 atrybut w całości:

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

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

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

130
2018-01-08 22:24



możesz również przejść $ ("# myTable input: checkbox"). each (...); - Chris Brandsma
Możesz też iść $(".myCheckbox").click() - RobertPitt
@Michah usunięcie zaznaczonego atrybutu uniemożliwia zresetowanie formularza - mcgrailm
Ta odpowiedź jest nieaktualna, ponieważ używa .attr zamiast .prop. - Blazemonger
$("#mycheckbox").click(); pracował dla mnie, ponieważ też słuchałem zmian .attr & .prop nie wywołał zdarzenia zmiany. - Damodar Bashyal


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

Lub możesz chcieć nadać im bardziej unikalne nazwy, takie jak mycheck () i myuncheck () na wypadek użycia innej biblioteki, która używa tych nazw.


67
2017-08-20 18:19



@ livfree75 usunięcie zaznaczonego atrybutu uniemożliwia zresetowanie formularza - mcgrailm
Ta odpowiedź jest nieaktualna, ponieważ używa .attr zamiast .prop. - Blazemonger


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

Ostatni wywoła zdarzenie click dla tego pola wyboru, inni nie. Jeśli masz niestandardowy kod w zdarzeniu onclick dla pola wyboru, które chcesz uruchomić, użyj ostatniego.


58
2018-01-08 22:36



top one will fail ... checked nie jest członkiem obiektu jquery - redsquare
Ta odpowiedź jest nieaktualna, ponieważ używa .attr zamiast .prop. - Blazemonger


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ć wartość false:

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

Jeśli zrobisz

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

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

ZŁY DEMO jQuery 1.6. Myślę, że to jest zepsute. Dla 1.6 mam zamiar zrobić nowy post na ten temat.

NOWY DEMO PRACY jQuery 1.5.2 działa w Chrome.

Oba używają wersji demonstracyjnych

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

56
2018-03-23 15:22



To jest niedokładne. ustawienie atrybutu "checked" na "" nie odznacz pola wyboru przynajmniej w chrome. - cwharris
@xixonia Zrobiłem test zanim napisałem twoje skrzypce nie działa, ponieważ nie zmieniłeś menu po lewej, aby dołączyć jquery - mcgrailm
mcgralim - w 1.6 jest jeszcze łatwiej ... $(".mycheckbox").prop("checked", true/false) - gnarf
@MarkAmery wspomniałeś, że mój post niczego nie dodawał w czasie postu, ale jest poprawny. Jeśli spojrzysz na historię zaakceptowanej odpowiedzi, zauważysz, że sugerują usunięcie elementu. Co uniemożliwia zresetowanie formularza, dlatego na początku napisałem. - mcgrailm
@mcgrailm Poszedłem do przodu i zmodyfikowałem zaakceptowaną odpowiedź w świetle twoich uwag. Jeśli chcesz rzucić okiem na to i sprawdzić, czy wygląda dobrze w swoim obecnym stanie, byłbym wdzięczny. Znowu przepraszam, że przedstawiłem ostrą krytykę, która przynajmniej częściowo była wysoce błędna. - Mark Amery


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

Jak sprawdzić zestaw pól 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ę one atrybutem value: nie ma identyfikatora dla każdego wejścia zestawu.

Odpowiedź Xian 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);

42
2018-06-24 11:33





Brakuje mi rozwiązania. Zawsze używam:

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

42
2017-09-20 11:43



To nie odpowiada na pytanie (pytanie dotyczy oprawa czy pole wyboru jest zaznaczone, nie określając, czy pole wyboru jest zaznaczone). Jest to również dość brzydki sposób sprawdzenia, czy pole wyboru jest zaznaczone (po pierwsze, wykorzystujesz nieoczywisty fakt, że .val() zawsze wróci undefined po wywołaniu na 0 elementach w celu wykrycia, że ​​obiekt jQuery jest pusty, kiedy można go po prostu sprawdzić .length zamiast tego) - patrz stackoverflow.com/questions/901712/... dla bardziej czytelnych podejść. - Mark Amery