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>

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

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

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

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

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

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

$("#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;
        }
    }
});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }
    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }