Vraag "Aangevinkt" instellen voor een selectievakje met jQuery?


Ik zou zoiets als dit willen doen om a aan te vinken checkbox gebruik makend van jQuery:

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

of

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

Bestaat zoiets?


3595
2018-01-08 22:20


oorsprong


antwoorden:


jQuery 1.6+

Gebruik de nieuwe .prop() methode:

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

jQuery 1.5.x en lager

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

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

Merk op dat dit zo is de aanpak gebruikt door eenheidstests van jQuery voorafgaand aan versie 1.6 en heeft de voorkeur boven gebruiken

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

aangezien de laatste, als het vakje aanvankelijk werd gecontroleerd, het gedrag van een oproep wijzigt in .reset() op elke vorm die het bevat - een subtiele maar waarschijnlijk niet gewenste gedragsverandering.

Voor meer context, enige onvolledige bespreking van de veranderingen in de afhandeling van de checked attribuut / eigenschap in de overgang van 1.5.x naar 1.6 is te vinden in de versie 1.6 release-opmerkingen en de Attributen versus eigenschappen sectie van de .prop() documentatie.

Elke versie van jQuery

Als u met slechts één element werkt, kunt u altijd het HTMLInputElement's .checked eigendom:

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

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


5402
2018-01-08 22:25



Gebruik:

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

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

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

622
2018-01-08 22:25



Dit is de juiste manier om selectievakjes in en uit te schakelen met jQuery, omdat dit platformonafhankelijk is, en zullen laat formulierreposs toe.

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

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

Door dit te doen, gebruikt u JavaScript-standaarden voor het aanvinken en uitschakelen van selectievakjes, dus elke browser die de 'checked'-eigenschap van het checkbox-element correct implementeert, voert deze code foutloos uit. Deze moeten alle belangrijke browsers zijn, maar ik kan niet testen voorafgaand aan Internet Explorer 9.

Het probleem (jQuery 1.6):

Zodra een gebruiker op een selectievakje klikt, reageert dit selectievakje niet meer op de wijzigingen in het aangevinkte kenmerk.

Hier is een voorbeeld van het selectievakje attribuut niet om het werk te doen nadat iemand heeft gedaan geklikt het selectievakje (dit gebeurt in Chrome).

Viool

De oplossing:

Door de eigenschap "checked" van JavaScript te gebruiken op de DOM elementen, we zijn in staat om het probleem direct op te lossen, in plaats van te proberen de DOM te manipuleren om te doen wat we doen willen het te doen.

Viool

Deze plug-in zal de gecontroleerde eigenschap van alle elementen die door jQuery zijn geselecteerd wijzigen en vink onder alle omstandigheden de selectievakjes aan en verwijder het vinkje. Dus hoewel dit een overdreven oplossing lijkt, zal het de gebruikerservaring van uw site verbeteren en de 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;
});

284
2018-05-06 19:31



Je kunt doen

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

of

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

Als u aangepaste code hebt in het onclick-evenement voor het selectievakje dat u wilt activeren, gebruikt u in plaats daarvan 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()
});

129
2018-01-08 22:24



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 die namen gebruikt.


67
2017-08-20 18:19



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

De laatste vuurt de klikgebeurtenis voor het selectievakje in, de anderen niet. Dus als u aangepaste code hebt in de onclick-gebeurtenis voor het selectievakje dat u wilt activeren, gebruikt u de laatste.


58
2018-01-08 22:36



Om een ​​selectievakje in te schakelen, moet u dit gebruiken

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

of

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

en om een ​​vinkje weg te halen, moet je dit altijd op false zetten:

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

Als je dat doet

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

het verwijdert het attribuut allemaal samen en daarom kunt u het formulier niet opnieuw instellen.

SLECHT DEMO jQuery 1.6. Ik denk dat dit kapot is. Voor 1.6 ga ik daar een nieuw bericht over maken.

NIEUWE WERKDE DEMO jQuery 1.5.2 werkt in Chrome.

Beide demo's gebruiken

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

56
2018-03-23 15:22



Ervan uitgaande dat de vraag is ...

Hoe vink ik een selectievakje aan OP WAARDE?

Houd er rekening mee dat in een standaard selectievakje alle ingangstags dezelfde naam hebben, ze verschillen van elkaar door het attribuut value: er is geen ID voor elke invoer van de set.

Xian's antwoord kan worden uitgebreid met een specifiekere selector, met behulp van de volgende regel code:

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

42
2018-06-24 11:33



Ik mis de oplossing. Ik gebruik altijd:

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

42
2017-09-20 11:43



Hiermee selecteert u elementen met het opgegeven kenmerk met een waarde die de gegeven substring "ckbItem" bevat:

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

Het selecteert alle elementen die ckbItem bevatten in het name -kenmerk.


37
2018-03-14 09:40



Om een ​​selectievakje in te schakelen met jQuery 1.6 of hoger doe dit gewoon:

checkbox.prop('checked', true);

Als u het vinkje wilt verwijderen, gebruikt u:

checkbox.prop('checked', false);

Dit is wat ik graag gebruik om een ​​checkbox in te stellen met jQuery:

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

Als je gebruikt jQuery 1.5 of lager:

checkbox.attr('checked', true);

Als u het vinkje wilt verwijderen, gebruikt u:

checkbox.attr('checked', false);

36
2017-10-23 00:41