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

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

Lub

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

Czy coś takiego istnieje?

4387
tpower 9 styczeń 2009, 01:20

28 odpowiedzi

Jak @ LiveFree75 powiedział:

jQuery 1.5.x i poniżej

Możesz także 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));

Następnie możesz po prostu zrobić:

    $(":checkbox").check();
    $(":checkbox").uncheck();
20
Peter Mortensen 21 maj 2017, 11:00

Jeśli używasz telefonu komórkowego i chcesz interfejsu aktualizować i wyświetlić pole wyboru jako niezaznaczone, należy użyć następujących czynności:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");
19
Matt Peacock 11 styczeń 2013, 13:05

Bądź świadomy przecieków pamięci w programie Internet Explorer przed Internet Explorer 9, jako Dokumentacja JQuery:

W programie Internet Explorer przed wersją 9, przy użyciu .Prop (), aby ustawić właściwość elementu DOM do cokolwiek innego niż prosta wartość prymitywna (liczba, łańcucha lub boolean) może powodować wycieki pamięci, jeśli właściwość nie zostanie usunięta (przy użyciu .Removeprop )) Przed uruchomieniem elementu DOM z dokumentu. Aby bezpiecznie ustawić wartości na obiektach DOM bez wycieków pamięci, użyj .data ().

19
Peter Mortensen 22 listopad 2014, 15:33

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

Sprawdzić,

$('.myCheckbox').removeAttr('checked');
19
logan 21 kwiecień 2015, 10:29

Posługiwać się:

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

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

$('.myCheckbox').is(':checked');
726
Peter Mortensen 18 marzec 2015, 18:34

Jest to prawidłowy sposób sprawdzania i odznaczania pola wyboru z jQuery, ponieważ jest standardem między platformą, a będzie zezwolić na reposty.

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

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

Robiąc to, używasz normy JavaScript do sprawdzania i odznaczania wyboru, więc dowolna przeglądarka, która prawidłowo implementuje "sprawdzoną" właściwość elementu pole wyboru uruchomi to kod bez zarzutu. To powinno być wszystkimi głównymi przeglądarkami, ale nie mogę przetestować poprzedniego przeglądarki Internet Explorer 9.

problem (jQuery 1.6):

Po wybraniu pola wyboru użytkownikiem, które przestaje odpowiadać na zmiany atrybutu "sprawdzone".

Oto przykład atrybutu pole wyboru nie działa, aby wykonać zadanie po tym, jak ktoś ma pole wyboru kliknięte (dzieje się to w Chrome).

Fiddle

Rozwiązanie:

Używając JavaScript "Sprawdzone" nieruchomość na dom elementy, jesteśmy w stanie rozwiązać problem bezpośrednio, zamiast próbować manipulować Dom w robienie tego, co chcemy.

Skrzypce

Ta wtyczka zmieni sprawdzoną właściwość dowolnych elementów wybranych przez jQuery i pomyślnie sprawdzić i usuń zaznaczenie pola wyboru w każdych okolicznościach. Chociaż może to wydawać się rozwiązaniem nadmiernie noszącym, sprawi, że użytkownik witryny jest lepszy i pomoże zapobiegać 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 );

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;
});
321
RevanthKrishnaKumar V. 31 lipiec 2015, 13:43

Możesz to zrobić

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

Lub

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

Jeśli masz niestandardowy kod w zdarzeniu Onclick, aby wybrać się, użyj tego zamiast tego:

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

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

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

Możesz zaznaczyć wszystkie pola wyboru:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
150
Peter Mortensen 29 grudzień 2011, 18:18

Możesz także 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));

Następnie możesz po prostu zrobić:

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

Albo możesz dać im bardziej unikalne nazwy, takie jak Mycheck () i Myuncheck () w przypadku korzystania z innej biblioteki, która korzysta z tych nazw.

82
livefree75 20 sierpień 2010, 18:19
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

Ostatni wystrzeliwuje zdarzenie Click dla pola wyboru, inne nie będą. Jeśli chcesz uzyskać niestandardowy kod w zdarzeniu Onclick, aby wybrać się, użyj ostatniego.

66
Chris Brandsma 3 luty 2009, 17:06

Aby sprawdzić pole wyboru, należy użyć

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

Lub

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

I usuń zaznaczenie pola wyboru, zawsze należy ustawić go na FAŁSZ:

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

Jeśli zrobisz

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

Usuwa atrybut razem i dlatego nie będziesz mógł zresetować formularza.

Bad Demo Jquery 1.6. Myślę, że to jest złamane. Za 1.6 Zrobię nowy post.

Nowy roboczy demo jquery 1.5.2 działa w Chrome.

Oba używane dema

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});
63
Peter Mortensen 29 grudzień 2011, 18:21

Wybiera to elementy, które mają określony atrybut o wartości zawierającym podany podłożący "CKBITEM":

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

Wybranie wszystkich elementów zawierających CKBITEM w atrybucie nazwy.

53
Abou-Emish 18 lipiec 2018, 13:44

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

Jak sprawdzić zestaw wyboru według wartości?

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

Odpowiedź Xian można przedłużyć za pomocą bardziej szczegółowy selektor , używając następującej linii kodu:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
47
5 revs, 3 users 74% 9 czerwiec 2014, 15:07

Brakuje jej rozwiązania. Zawsze użyję:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
46
Peter Mortensen 13 grudzień 2014, 16:43

Aby sprawdzić pole wyboru za pomocą jQuery 1.6 lub wyższego, po prostu zrobić:

checkbox.prop('checked', true);

Aby odznaczyć, użyj:

checkbox.prop('checked', false);

Oto, czego lubię używać, aby przełączyć pole wyboru za pomocą jQuery:

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

Jeśli używasz jQuery 1.5 lub niższy:

checkbox.attr('checked', true);

Aby odznaczyć, użyj:

checkbox.attr('checked', false);
43
Ramon de Jesus 9 maj 2017, 13:23

Oto sposób, aby zrobić to 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>
38
Xitalogy 10 maj 2016, 09:58

Oto kod sprawdzony 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 jQuery 1.6+ Prop metody, 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;
    });
});
32
MrBoJangles 11 kwiecień 2017, 15:55

Spróbuj tego:

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

$('#checkboxid').get(0).checked = false; //For unchecking
31
Peter Mortensen 16 luty 2013, 10:33

Możemy użyć elementObject z jQuery, aby sprawdzić atrybut:

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

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

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

$(objectElement).prop('checked');
30
MrBoJangles 11 kwiecień 2017, 15:53

Jeśli używasz PhoneGap Robi Rozwój aplikacji, a masz wartość na przycisku, który chcesz wyświetlić natychmiast, pamiętaj Zrób to

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

Odkryłem, że bez rozpiętości interfejs nie będzie aktualizować bez względu na to, co robisz.

26
Peter Mortensen 16 luty 2013, 10:32

Oto kod i demo, jak sprawdzić wiele pola 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;
        }
    }
});
26
Joaquinglezsantos 10 luty 2016, 13:18

Inne możliwe rozwiązanie:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
22
Getz 21 lipiec 2014, 09:34

Sprawdzić i odznaczyć

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
18
Theraot 3 grudzień 2013, 02:18
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
17
mahmoh 16 lipiec 2013, 02:57

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

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

Lub

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

Nawet krótszy byłby:

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

Oto a jsfiddle .

16
Peter Mortensen 13 grudzień 2014, 16:46

Zwykły JavaScript jest bardzo prosty i mniejszy nad głową:

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

Przykład tutaj

15
Alex W 23 wrzesień 2013, 01:12

Nie mogłem tego pracować, używając:

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

Zarówno prawdziwe, jak i fałszywe sprawdzą pole wyboru. To, co dla mnie zadziałało:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
14
Mark Amery 15 grudzień 2014, 18:44

Kiedy sprawdziłeś wybrane pole wyboru;

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

To może nie wystarczyć. Należy również zadzwonić do poniższej funkcji;

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

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

14
Serhat Koroglu 5 marzec 2015, 13:10

Oto pełna odpowiedź za pomocą jQuery.

Testuję go 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
    });
12
user1477929user1477929 27 luty 2013, 15:49