javascript - Sätta "checked" för en kryssruta med jQuery

Jag skulle vilja göra något liknande för att markera en checkbox med hjälp av jQuery:

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

eller

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

Finns en sådan sak?

Svar #1

Modern jQuery

Använd .prop():

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

DOM-API

Om du arbetar med bara ett element kan du alltid bara få åtkomst till den underliggande HTMLInputElement och ändra dess .checked-egenskap:

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

Fördelen med att använda .prop() och .attr()-metoderna istället för detta är att de kommer att fungera på alla matchade element.

jQuery 1.5.x och tidigare

Metoden .prop() är inte tillgänglig, så du behöver använda .attr().

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

Observera att detta är den metod som används av jQuerys enhetstester före version 1.6 och att den är att föredra framför att använda $ ('.myCheckbox').removeAttr('checked'); eftersom det senare, om rutan ursprungligen var markerad, kommer att ändra beteendet vid ett anrop till .reset() på vilket formulär som helst som innehåller den - en subtil men förmodligen oönskad beteendeförändring.

För mer sammanhang kan viss ofullständig diskussion om förändringarna i hanteringen av checked-attributet/egenskapen i övergången från 1.5.x till 1.6 hittas i versionsanteckningarna för 1.6 och i avsnittet Attributes vs. Properties i dokumentationen för .prop().

Svar #2

Använd :

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

Och om du vill kontrollera om en kryssruta är markerad eller inte:

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

Svar #3

Detta är det korrekta sättet att kryssa i och avmarkera kryssrutor med jQuery, eftersom det är en plattformsoberoende standard och kommer att tillåta ompostning av formulär.

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

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

Genom att göra detta använder du JavaScript-standarder för att markera och avmarkera kryssrutor, så alla webbläsare som korrekt implementerar egenskapen "checked" för kryssruteelementet kommer att köra denna kod utan problem. Detta bör gälla alla större webbläsare, men jag kan inte testa före Internet Explorer 9.

Problemet (jQuery 1.6):

När en användare klickar på en kryssruta slutar den kryssrutan att svara på ändringar av attributet "checked".

Här är ett exempel på att kryssrutes attributet misslyckas med att göra jobbet efter att någon har klickat på kryssrutan (detta händer i Chrome).

Fiol

Lösningen:

Genom att använda JavaScripts "checked"-egenskap på DOM-elementen kan vi lösa problemet direkt, istället för att försöka manipulera DOM så att den gör vad vi vill att den ska göra.

Fiol

Detta plugin kommer att ändra den markerade egenskapen för alla element som valts med jQuery och framgångsrikt markera och avmarkera kryssrutor under alla förhållanden. Så, även om detta kan verka som en överväldigande lösning, kommer det att förbättra användarupplevelsen på din webbplats och hjälpa till att förhindra användarfrustration.

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

Alternativt, om du inte vill använda ett plugin, kan du använda följande kodsnuttar:

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

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

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

Svar #4

Du kan göra

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

eller

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

Om du har egen kod i onclick-händelsen för kryssrutan som du vill ska köras, använd den här istället:

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

Du kan avmarkera genom att ta bort attributet helt:

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

Du kan markera alla kryssrutor så här:

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

Svar #5

Du kan också utöka $.fn-objektet med nya metoder:

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

Då kan du bara göra:

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

Eller så kanske du vill ge dem mer unika namn som mycheck() och myuncheck() om du skulle använda något annat bibliotek som använder de namnen.

Svar #6

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

Den sista kommer att utlösa klickhändelsen för kryssrutan, de andra kommer inte att göra det. Så om du har anpassad kod i onclick-händelsen för kryssrutan som du vill ska utlösas, använd den sista.

Svar #7

För att markera en kryssruta bör du använda

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

eller

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

och för att avmarkera en kryssruta bör du alltid sätta den till falskt:

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

Om du gör

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

det tar bort attributet helt och hållet och därför kommer du inte att kunna återställa formuläret.

DÅLIG DEMO jQuery 1.6. Jag tror att detta är trasigt. För 1.6 kommer jag att göra ett nytt inlägg om det.

NY ARBETSDEMO jQuery 1.5.2 fungerar i Chrome.

Både demonstrationerna använder

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

Svar #8

Detta väljer element som har det angivna attributet med ett värde som innehåller den givna delsträngen "ckbItem":

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

Det kommer att välja alla element som innehåller ckbItem i sitt namn-attribut.

Svar #9

Förutsatt att frågan är...

Hur markerar jag en kryssrutegrupp EFTER VÄRDE?

Kom ihåg att i en typisk uppsättning kryssrutor har alla inmatningstaggar samma namn, de skiljer sig åt genom attributet value: det finns inga ID för varje inmatning i uppsättningen.

Xians svar kan utökas med en mer specifik selector, genom att använda följande kodrad:

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

Svar #10

Jag saknar lösningen. Jag kommer alltid att använda:

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

Svar #11

För att markera en kryssruta med jQuery 1.6 eller högre, gör bara så här:

checkbox.prop('checked', true);

För att avmarkera, använd:

checkbox.prop('checked', false);

Här är vad jag gillar att använda för att växla en kryssruta med jQuery:

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

Om du använder jQuery 1.5 eller lägre:

checkbox.attr('checked', true);

För att avmarkera, använd:

checkbox.attr('checked', false);

Svar #12

Här är ett sätt att göra det utan 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>

Svar #13

Här är kod för markerad och omarkerad med en knapp:

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

Uppdatering: Här är samma kodblock som använder den nyare Jquery 1.6+ prop-metoden, som ersätter 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;
    });
});

Svar #14

Prova detta:

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

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

Svar #15

Vi kan använda elementObject med jQuery för att få attributet checked:

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

Vi kan använda detta för alla jQuery-versioner utan några fel.

Uppdatering: Jquery 1.6+ har den nya metoden prop som ersätter attr, t.ex.:

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

Svar #16

Om du använder PhoneGap för applikationsutveckling, och du har ett värde på knappen som du vill visa direkt, kom ihåg att göra detta

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

Jag upptäckte att utan span kommer gränssnittet inte att uppdateras oavsett vad du gör.

Svar #17

Här är koden och demon för hur man kontrollerar flera kryssrutor...

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

Svar #18

En annan möjlig lösning:

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

Svar #19

Som @livefree75 sa:

jQuery 1.5.x och tidigare

Du kan också utöka $.fn-objektet med nya metoder:

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

Men i nya versioner av jQuery måste vi använda något som detta:

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

Då kan du bara göra:

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

Svar #20

För jQuery 1.6+

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

För jQuery 1.5.x och äldre

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

För att kontrollera,

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

Svar #21

Om du använder mobil och vill att gränssnittet ska uppdateras och visa kryssrutan som avmarkerad, använd följande:

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

Svar #22

Att markera och avmarkera

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

Svar #23

Var medveten om minnesläckor i Internet Explorer före Internet Explorer 9, eftersom jQuery-dokumentationen anger:

I Internet Explorer före version 9 kan användning av .prop() för att ställa in en DOM‑elementegenskap till något annat än ett enkelt primitivt värde (nummer, sträng eller boolean) orsaka minnesläckor om egenskapen inte tas bort (med .removeProp()) innan DOM‑elementet tas bort från dokumentet. För att tryggt ställa in värden på DOM‑objekt utan minnesläckor, använd .data().

Svar #24

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

Svar #25

Detta är förmodligen den kortaste och enklaste lösningen:

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

eller

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

Ännu kortare skulle vara:

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

Här är också en jsFiddle.

Svar #26

Ren JavaScript är mycket enkelt och har mycket mindre overhead:

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

Exempel här

Svar #27

När du markerade en kryssruta som;

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

det kanske inte räcker. Du bör också anropa funktionen nedan;

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

Särskilt när du tog bort kryssrutan markerad attribut.

Svar #28

Jag kunde inte få det att fungera med:

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

Både sant och falskt skulle markera kryssrutan. Vad som fungerade för mig var:

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

Svar #29

Här är det kompletta svaret med jQuery

Jag testar det och det fungerar 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
    });

Svar #30

Om du använder ASP.NET MVC och genererar många kryssrutor och senare vill markera/avmarkera alla med JavaScript kan du göra följande.

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