Instelling aangevinkt voor een selectievakje met jQuery

Ik zou zoiets als dit willen doen om een ​​checkboxaan te vinken met jQuery:

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

of

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

Bestaat zoiets?


Antwoord 1, autoriteit 100%

Moderne jQuery

Gebruik .prop():

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

DOM-API

Als je met slechts één element werkt, heb je altijd toegang tot de onderliggende HTMLInputElementen wijzig het .checkedeigenschap:

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

Het voordeel van het gebruik van de methoden .prop()en .attr()in plaats hiervan is dat ze op alle overeenkomende elementen werken.

jQuery 1.5.x en lager

De methode .prop()is niet beschikbaar, dus u moet .attr().

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

Merk op dat dit de benadering is die wordt gebruikt door De eenheid van jQuery test vóór versie 1.6en verdient de voorkeur boven het gebruik van $('.myCheckbox').removeAttr('checked');aangezien de laatste, als het vakje aanvankelijk was aangevinkt, verander het gedrag van een aanroep in .reset()op elk formulier dat het bevat – een subtiele maar waarschijnlijk ongewenste gedragsverandering.

Voor meer context is een onvolledige bespreking van de wijzigingen in de afhandeling van het checkedattribuut/eigenschap in de overgang van 1.5.x naar 1.6 te vinden in de versie 1.6 release-opmerkingenen het gedeelte Kenmerken versus eigenschappenvan de .prop()documentatie.


Antwoord 2, autoriteit 12%

Gebruik:

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

En als u wilt controleren of een selectievakje is aangevinkt of niet:

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

Antwoord 3, autoriteit 5%

Dit is de juiste manier om selectievakjes aan en uit te vinken met jQuery, omdat het platformonafhankelijke standaard is, en zalhet opnieuw posten van formulieren toestaan.

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

Door dit te doen, gebruikt u JavaScript-standaarden voor het in- en uitschakelen van selectievakjes, dus elke browser die de eigenschap “checked” van het selectievakje-element correct implementeert, zal deze code foutloos uitvoeren. Dit moetenalle belangrijke browsers zijn, maar ik kan niet eerder testen dan Internet Explorer 9.

Het probleem(jQuery 1.6):

Zodra een gebruiker op een selectievakje klikt, reageert dat selectievakje niet meer op de ‘aangevinkte’ kenmerkwijzigingen.

Hier is een voorbeeld van het kenmerk van het selectievakje dat het werk niet doet nadat iemand op het selectievakje opheeft geklikt (dit gebeurt in Chrome).

Fiddle

De oplossing:

Door de eigenschap “checked” van JavaScript te gebruiken op de DOM-elementen, kunnen we het probleem rechtstreeks oplossen in plaats van proberen de DOM te manipuleren om te doen wat we willendat het doet.

Fiddle

Deze plug-in zal de aangevinkte eigenschap van alle elementen die door jQuery zijn geselecteerd, wijzigen en onder alle omstandigheden de selectievakjes met succes aan- en uitvinken. Dus hoewel dit misschien een overdreven oplossing lijkt, zal het de gebruikerservaring van uw site verbeteren en frustratie van gebruikers helpen voorkomen.

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

Als u geen plug-in wilt gebruiken, kunt u ook de volgende codefragmenten gebruiken:

// Check
$(':checkbox').prop('checked', true);
// Un-check
$(':checkbox').prop('checked', false);
// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

Antwoord 4, autoriteit 2%

Je kunt doen

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

of

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

Als je aangepaste code hebt in de onclick-gebeurtenis voor het selectievakje dat je wilt activeren, gebruik dan deze:

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

U kunt het vinkje verwijderen door het kenmerk volledig te verwijderen:

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

U kunt alle selectievakjes als volgt aanvinken:

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

Antwoord 5

U kunt het $.fn-object ook uitbreiden met nieuwe methoden:

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

Dan kun je gewoon doen:

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

Of misschien wilt u ze meer unieke namen geven, zoals mycheck() en myuncheck() voor het geval u een andere bibliotheek gebruikt die deze namen gebruikt.


Antwoord 6

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

De laatste activeert de klikgebeurtenis voor het selectievakje, de andere niet.
Dus als je aangepaste code hebt in de onclick-gebeurtenis voor het selectievakje dat je wilt activeren, gebruik dan de laatste.


Antwoord 7

Gebruik om een ​​selectievakje aan te vinken

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

of

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

en om een ​​selectievakje uit te schakelen, moet u dit altijd op false zetten:

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

Als je dat doet

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

het verwijdert het kenmerk in zijn geheel en daarom kunt u het formulier niet opnieuw instellen.

SLECHTE DEMO jQuery 1.6. Ik denk dat deze kapot is. Voor 1.6 ga ik daar een nieuwe post over maken.

NIEUWE WERKDEMO jQuery 1.5.2werkt in Chrome.

Beide demo’s gebruiken

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

Antwoord 8

Dit selecteert elementen die het gespecificeerde attribuut hebben met een waarde die de gegeven substring “ckbItem” bevat:

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

Het zal alle elementen selecteren die ckbItem in zijn name-attribuut bevatten.


Antwoord 9

Ervan uitgaande dat de vraag is…

Hoe vink ik een checkbox-set OP WAARDE?

Onthoud dat in een typische set met selectievakjes alle invoertags dezelfde naam hebben, ze verschillen door het attribuut value: er is geen ID voor elke invoer van de set .

Xian’s antwoord kan worden uitgebreid met een meer specifieke selector, met behulp van de volgende regel code:

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

Antwoord 10

Ik mis de oplossing. Ik gebruik altijd:

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

Antwoord 11

Als u een selectievakje wilt aanvinken met jQuery 1.6of hoger, gaat u als volgt te werk:

checkbox.prop('checked', true);

Gebruik om het vinkje uit te schakelen:

checkbox.prop('checked', false);

Dit is wat ik graag gebruik om een ​​selectievakje in te schakelen met jQuery:

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

Als u jQuery 1.5of lager gebruikt:

checkbox.attr('checked', true);

Gebruik om het vinkje uit te schakelen:

checkbox.attr('checked', false);

Antwoord 12

Hier is een manier om het te doen zonder 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>

Antwoord 13

Hier is de code voor aangevinkt en niet aangevinkt met een knop:

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: hier is hetzelfde codeblok met de nieuwere JQuery 1.6+ prop-methode, die attr vervangt:

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

Antwoord 14

Probeer dit:

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

Antwoord 15

We kunnen elementObjectgebruiken met jQuery om het attribuut gecontroleerd te krijgen:

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

We kunnen dit zonder fouten voor alle jQuery-versies gebruiken.

Update: JQuery 1.6+ heeft de nieuwe prop-methode die attr vervangt, bijvoorbeeld:

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

Antwoord 16

Als u PhoneGapgebruikt voor applicatieontwikkeling, en u heeft een waarde op de knop die u direct wilt weergeven , vergeet niet om dit te doen

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

Ik ontdekte dat zonder de span, de interface niet wordt bijgewerkt, wat je ook doet.


Antwoord 17

Hier is de code en demo voor het aanvinken van meerdere selectievakjes…

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

Antwoord 18

Een andere mogelijke oplossing:

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

Antwoord 19

Zoals @livefree75 zei:

jQuery 1.5.x en lager

U kunt het $.fn-object ook uitbreiden met nieuwe methoden:

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

Maar in nieuwe versies van jQuery moeten we zoiets als dit gebruiken:

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

Dan kun je gewoon doen:

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

Antwoord 20

Als u mobiel gebruikt en u wilt dat de interface wordt bijgewerkt en het selectievakje niet is aangevinkt, gebruikt u het volgende:

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

Antwoord 21

Voor jQuery 1.6+

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

Voor jQuery 1.5.x en lager

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

Om te controleren,

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

Antwoord 22

Aan- en uitvinken

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

Antwoord 23

Let op geheugenlekken in Internet Explorer voorafgaand aan Internet Explorer 9, zoals de jQuery-documentatie vermeldt:

In Internet Explorer vóór versie 9, .prop() gebruiken om een ​​DOM in te stellen
element eigenschap naar iets anders dan een eenvoudige primitieve waarde
(getal, tekenreeks of boolean) kan geheugenlekken veroorzaken als de eigenschap is
niet verwijderd (met .removeProp()) voordat het DOM-element wordt verwijderd
uit het document. Veilig waarden instellen voor DOM-objecten zonder geheugen
lekken, gebruik .data().


Antwoord 24

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

Antwoord 25

Dit is waarschijnlijk de kortste en gemakkelijkste oplossing:

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

of

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

Nog korter zou zijn:

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

Hier is ook een jsFiddle.


Antwoord 26

Plain JavaScript is heel eenvoudig en veel minder overhead:

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

Voorbeeld hier


Antwoord 27

Ik kreeg het niet werkend met:

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

Zowel waar als onwaar zouden het selectievakje aanvinken. Wat voor mij werkte was:

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

Antwoord 28

Als je een selectievakje hebt aangevinkt, zoals;

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

het is misschien niet genoeg. Je moet ook de onderstaande functie aanroepen;

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

Vooral wanneer u het aangevinkte attribuut verwijderde.


Antwoord 29

Hier is het volledige antwoord
jQuery gebruiken

Ik test het en het werkt 100% 😀

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

Antwoord 30

Als je ASP.NET MVCgebruikt, genereer dan veel selectievakjes en heb later om alles te selecteren/deselecterenmet JavaScript kunt u het volgende doen.

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes