Ustawienie "zaznaczone" dla checkboxa z jQuery?

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

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

Lub

$(".myCheckBox").selected(true);
Czy coś takiego istnieje?
Author: Mogsdad, 2009-01-09

30 answers

JQuery 1.6 +

Użyj nowego .prop() "metoda": {]}

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

JQuery 1.5.x i poniżej

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

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

Zauważ, że jest to podejście używane w testach jednostkowych jQuery przed wersją 1.6 i jest lepsze niż użycie

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

Ponieważ to ostatnie, jeśli pole zostało wstępnie zaznaczone, zmieni zachowanie wywołania na .reset() na dowolnej formie, która go zawiera - subtelna, ale prawdopodobnie niepożądana zmiana zachowania.

Aby uzyskać więcej kontekstu, niekompletne omówienie zmian w obsłudze atrybutu/właściwości checked w przejściu z 1.5.x do 1.6 można znaleźć w Wersja 1.6 release notes i atrybuty vs. właściwości sekcja.prop() Dokumentacja .

Dowolna wersja jQuery

Jeśli pracujesz tylko z jednym elementem, zawsze możesz zmodyfikować HTMLInputElement'S .checked własność:

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

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

 5481
Author: Xian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-29 17:27:36

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');
 637
Author: bchhun,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-18 18:34:03

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;
});
 288
Author: cwharris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-31 13:43:36

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()
});
 134
Author: Micah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-29 18:18:24

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.

 70
Author: livefree75,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-08-20 18:19:03
$("#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.

 61
Author: Chris Brandsma,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-03 17:06:43

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');
    }
});
 58
Author: mcgrailm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-29 18:21:55

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);
 42
Author: Peter Krauss,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-09 15:07:56

Brakuje mi rozwiązania. Zawsze używam:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
 42
Author: Overbeeke,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-13 16:43:53

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.

 41
Author: Abou-Emish,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-18 13:44:09

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);
 37
Author: Ramon de Jesus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-09 13:23:02

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>
 34
Author: Aeoril,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-10 09:58:32

Spróbuj tego:

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

$('#checkboxid').get(0).checked = false; //For unchecking
 28
Author: prashanth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-16 10:33:47

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;
    });
});
 26
Author: starjahid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-11 15:55:04

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');
 24
Author: Prasanth P,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-11 15:53:21

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.

 23
Author: Clement Ho,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-16 10:32:37

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;
        }
    }
});
 22
Author: tamilmani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-10 13:18:22

Inne możliwe rozwiązanie:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
 19
Author: Muhammad Aamir Ali,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-21 09:34:50

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");
 17
Author: Matt Peacock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-11 13:05:35

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

 17
Author: naor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-22 15:33:52

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');
 17
Author: logan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-21 10:29:07

Aby sprawdzić i odznaczyć

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
 16
Author: jj2422,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-03 02:18:05
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
 15
Author: mahmoh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-16 02:57:18

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ż.

 14
Author: frieder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-13 16:46:09

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();
 14
Author: Ardalan Shahgholi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-21 11:00:42

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

 13
Author: Alex W,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-23 01:12:17

Po zaznaczeniu checkboxa typu;

$('.className').attr('checked', 'checked')
To może nie wystarczyć. Należy również wywołać funkcję poniżej;
$('.className').prop('checked', 'true')

Szczególnie po usunięciu atrybutu checkbox checked.

 12
Author: Serhat Koroglu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-05 13:10:51

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
 11
Author: fredcrs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-15 18:44:58

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
    });
 10
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-27 15:49:10

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");
}
 10
Author: ijarlax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-03 21:31:55