jQuery set checkbox bifat (Programare, Jquery, Checkbox)

psopa a intrebat.

Am încercat deja toate căile posibile, dar tot nu am reușit să fac să funcționeze.Am o fereastră modală cu o fereastră de tip checkbox Vreau ca atunci când se deschide fereastra modală, să se deschidă checkbox bifarea sau debifarea să se bazeze pe o valoare din baza de date. (Am asta deja funcționează cu alte câmpuri de formular.) Am început să încerc să o bifez, dar nu a funcționat.

Diviziunea mea HTML:

<div id="fModal" class="modal" >
    ...
    <div class="row-form">
        <div class="span12">
            <span class="top title">Estado</span>
             
          <input type="checkbox"  id="estado_cat" class="ibtn">
       </div>
    </div>             
</div>

și jQuery:

$("#estado_cat").prop( "checked", true );

Am încercat, de asemenea, cu attr, , și altele văzute aici pe forumuri, dar niciuna nu pare să funcționeze.
Poate cineva să-mi indice calea cea bună?


EDITARE

OK, chiar îmi scapă ceva aici. Pot să bifez/dezbifez cu ajutorul codului dacă caseta de selectare se află în pagină, dar este în modală fereastră, nu pot. Am încercat zeci de moduri diferite.

Am un link care ar trebui să deschidă fereastra modală:

<a href='#' data-id='".$row['id_cat']."' class='editButton icon-pencil'></a>

și jQuery care să „asculte” click-ul și să execute niște operații cum ar fi umplerea unor căsuțe de text cu date provenite din baza de date. Totul funcționează așa cum îmi doresc, dar problema este că nu pot seta checkbox-ul bifat/nebifat folosind codul. Vă rog să mă ajutați!

$(function () {
    $(".editButton").click(function () {
        var id = $(this).data('id');
        $.ajax({
            type: "POST",
            url: "process.php",
            dataType: "json",
            data: {
                id: id,
                op: "edit"
            },
        }).done(function (data) {
            // The next two lines work fine,
            // i.e. it grabs the value from database and fills the textboxes
            $("#nome_categoria").val(data['nome_categoria']);
            $("#descricao_categoria").val(data['descricao_categoria']);

            // Then I tried to set the checkbox checked (because it's unchecked by default)
            // and it does not work
            $("#estado_cat").prop("checked", true);
            $('#fModal').modal('show');
        });
        
        evt.preventDefault();
        return false;
    });
});

Comentarii

  • ce clasă se aplică pe div-ul modal atunci când se deschide modalul ? De asemenea, cum se verifică valoarea din baza de date – Folosind AJAX sau este deja pre-fetch și stocată într-o variabilă ? –  > Por user1428716.
  • setați caseta de verificare după încărcarea ferestrei modale Cred că setați caseta de verificare înainte de încărcarea ferestrei modale. $(‘#fModal’).modal(‘show’); $(„#estado_cat”).attr(„checked”, „checked”); –  > Por Vineeth Bhaskaran.
19 răspunsuri
singe Batteur

trebuie să folosiți funcția ‘prop’ :

.prop('checked', true);

Înainte de jQuery 1.6 (vezi răspunsul utilizatorului2063626):

.attr('checked','checked')

Comentarii

  • Se pare că aveți răspunsul corect. Ați putea să detaliați? stackoverflow.com/a/5876747/29182.  > Por Ziggy.
  • Este bine de știut acest lucru. Am trecut cu vederea acest lucru atunci când am parcurs documentația de migrare a jQuery 3.3.x. –  > Por reaper_unique.
  • Este bine de știut că nu puteți utiliza attr în versiunile mai noi de jQuery, așa cum am crezut inițial –  > Por Kaloyan.
  • Acesta ar trebui să fie răspunsul acceptat. –  > Por Zak.
eriknoyes

Luând toate răspunsurile propuse și aplicându-le la situația mea – încercând să bifez sau să debifez o căsuță de bifat pe baza unei valori recuperate de true (ar trebui să bifeze căsuța) sau false (nu ar trebui să bifeze căsuța) – am încercat toate răspunsurile de mai sus și am constatat că folosind .prop(„checked”, true) și .prop(„checked”, false)) a fost soluția corectă.

Nu pot adăuga comentarii sau răspunsuri de până acum, dar am considerat că acest lucru a fost suficient de important pentru a adăuga la conversație.

Iată codul de mână pentru o modificare a calendarului complet care spune că, dacă valoarea recuperată „allDay” este adevărată, atunci bifați caseta de verificare cu ID-ul „even_allday_yn”:

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}

Comentarii

    49

  • De ce nu doar pe o singură linie? $( "#even_allday_yn").prop('checked', allDay); –  > Por Xavier Hayoz.
  • El încerca să demonstreze valorile posibile. Cum ați putea ști valoarea reală a „allDay” fără un exemplu ca acesta de aici? –  > Por Soroush Falahati.
  • @Xavier Hayoz. Acest lucru funcționează dacă, și numai dacă, allDay returnează „true” sau „false” ca valoare literală – nu una pur binară. Casetele de verificare sunt concepute prost în html, iar starea lor de verificare poate fi exprimată în moduri foarte diferite. Singurul mod sigur și sigur pe care îl cunosc este: allDay === „true” ? $(‘#even_allday_yn).prop („checked”, true): $(‘#even_allday_yn).prop („checked”, false). Observați operatorul de egalitate strictă. –  > Por Brice Coustillas.
  • $('#even_allday_yn').prop('checked', allDay === true) va funcționa deoarece allDay === true dă un rezultat boolean. –  > Por leftclickben.
user2063626

Dude încercați codul de mai jos :

$("div.row-form input[type='checkbox']").attr('checked','checked')

OR

$("div.row-form #estado_cat").attr("checked","checked");

OR

$("div.row-form #estado_cat").attr("checked",true);

Comentarii

    29

  • Ca și în răspunsul lui KeyOfJ, folosiți .prop('checked', true) în loc de attr – Tocmai m-am confruntat cu aceeași problemă și prop funcționează. –  > Por semmelbroesel.
  • FYI, dacă doriți să utilizați :checked pseudo-selector sau alte caracteristici HTML native ale casetei de selectare, trebuie să utilizați .prop. –  > Por benastan.
  • Am încercat acest lucru și nu a funcționat, dar când am schimbat codul în $(„div.row-form #estado_cat”).prop(„checked”, „checked”); a funcționat. (Am schimbat attr în prop). –  > Por Jim Evans.
  • Din păcate, prop este jQuery 1.6 și versiunile ulterioare, așa că, dacă sunteți blocat într-un cadru vechi, nu va funcționa pentru dvs.  > Por wolffer-east.
  • .attr() este calea de urmat pentru versiunile anterioare, .prop() pentru jQuery 1.6+. –  > Por vapcguy.
shadock

atributul „checked” „bifează” caseta de selectare imediat ce există. Deci, pentru a bifa/deconfirma o căsuță de bifat trebuie să setați/deconfirmați atributul.

Pentru bifarea căsuței:

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

Pentru a debifa caseta:

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

Pentru a testa starea bifată:

if ($('#myCheckbox').is(':checked'))

Sper că vă ajută…

KeyOfJ

Din moment ce vă aflați într-o fereastră modală (fie ea dinamică sau în pagină) puteți folosi următorul cod pentru a vă atinge scopul: (Am întâmpinat aceeași problemă pe site-ul meu și așa am rezolvat-o)

HTML:

<div class="content-container" style="text-align: right;">
    <input type="checkbox" id="QueryGroupCopyQueries">
    <label for="QueryGroupCopyQueries">Create Copies</label>                                                   
</div>

CODE:

$.each(queriesToAddToGroup, function (index, query) {
    if (query.groupAddType === queriesGroupAddType.COPY) {

        // USE FIND against your dynamic window and PROP to set the value
        // if you are using JQUERY 1.6 or higher.
        $(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);

        return;
    }

În exemplul de mai sus, „kendoWindow” este fereastra mea (a mea este dinamică, dar fac acest lucru și atunci când adaug la un element direct în pagină). Trec în buclă printr-o matrice de date („queriesToAddToGroup”) pentru a vedea dacă vreun rând are atributul COPY. În caz afirmativ, vreau să activez caseta de selectare din cadrul ferestrei care setează acest atribut atunci când un utilizator salvează din această fereastră.

Comentarii

  • Trebuie remarcat faptul că, deși alte răspunsuri la întrebarea în cauză pot „funcționa”, utilizarea prop așa cum sugerează acest răspuns este modalitatea CORECTĂ de realizare a verificării/decompletării dinamice a căsuței de control jQuery. –  > Por Joshua Burns.
user1849310
.attr("checked",true)
.attr("checked",false)

va funcționa.Asigurați-vă că true și false nu sunt între ghilimele.

Comentarii

  • Attr nu va bifa caseta de verificare, prop este cel care va face verificarea. Cum ar fi .prop('checked', true); Mai multe informații în această postare –  > Por casivaagustin.
  • @casivaagustin Depinde de versiunea jQuery. Cred că mai devreme de jQuery 1.6, .attr() a funcționat, așa cum a fost descris. –  > Por vapcguy.
Subir

Puteți scrie ca mai jos codul dat.

HTML

<input type="checkbox"  id="estado_cat" class="ibtn">

jQuery

$(document).ready(function(){
    $(".ibtn").click(function(){
        $(".ibtn").attr("checked", "checked");
    });
});

Sper că funcționează pentru tine.

Isaac C Way

Știu că acest lucru cere o soluție Jquery, dar m-am gândit să subliniez că este foarte ușor să comutați acest lucru în javascript simplu.

var element = document.getElementById("estado_cat");
element.checked = 1;

Acesta va funcționa în toate versiunile actuale și viitoare.

Comentarii

  • Cred că uneori uităm că unele dintre cele mai de bază lucruri sunt mult mai bune folosind js brut. –  > Por LarryBud.
lordcheeto

Dacă doriți să folosiți această funcționalitate pentru un script GreaseMonkey pentru a bifa automat o casetă de bifare pe o pagină, rețineți că simpla setare a proprietății bifate poate să nu declanșeze acțiunea asociată. În acest caz, „apăsarea” căsuței de selectare probabil că o va face (și va seta, de asemenea, proprietatea bifată).

$("#id").click()

reza akhlaghi
<body>
      <input id="IsActive" name="IsActive" type="checkbox" value="false">
</body>

<script>
    $('#IsActive').change(function () {
         var chk = $("#IsActive")
         var IsChecked = chk[0].checked
         if (IsChecked) {
          chk.attr('checked', 'checked')
         } 
         else {
          chk.removeAttr('checked')                            
         }
          chk.attr('value', IsChecked)
     });
</script>

Arvin
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

Find va returna array , deci utilizați [0] pentru a obține chiar dacă există un singur element

dacă nu folosiți find, atunci

$("#subclip_checkbox").checked=true;

acest lucru a funcționat bine în Mozilla Firefox pentru mine

Comentarii

  • Acest lucru funcționează, toate celelalte soluții nu sunt detectate dacă aveți un stil :checked în css-ul dvs.  > Por bhappy.
Sergio Pulgarin

A funcționat pentru mine:

$checkbok.prop({checked: true});

Comentarii

  • user $(„#estado_cat”).attr(„checked”, „checked”); -.  > Por Vineeth Bhaskaran.
user1428716

Încercați acest lucru din moment ce folosiți jQuery UI probabil (dacă nu, vă rugăm să comentați)

 $("#fModal" ).dialog({
     open: function( event, ui ) {

     if(//some hidden value check which stores the DB value==expected value for
      checking the Checkbox)

         $("div.row-form input[type='checkbox']").attr('checked','checked');

    }
   });

Comentarii

  • @user2063626 – partea de js din interiorul funcției este copiată din răspunsul dvs.  > Por user1428716.
J2N

Ați încercat să rulați $("#estado_cat").checkboxradio("refresh") pe caseta de selectare?

Chetan Patel

Acest lucru funcționează.

 $("div.row-form input[type='checkbox']").attr('checked','checked');

Eddy

Am întâlnit și eu această problemă.

și aici este vechiul meu cod nu funcționează

if(data.access == 'private'){
     Jbookaccess.removeProp("checked") ; 
    //I also have tried : Jbookaccess.removeAttr("checked") ;
 }else{
    Jbookaccess.prop("checked", true)
}

aici este noul meu cod care a funcționat acum:

if(data.access == 'private'){
     Jbookaccess.prop("checked",false) ;
 }else{
    Jbookaccess.prop("checked", true)
}

Deci, punctul cheie este că înainte de a funcționa, asigurați-vă că proprietatea verificată există și nu a fost eliminată.

Comentarii

  • Mult mai simplu: Jbookaccess.prop("checked", data.access != 'private'); –  > Por Legionar.
Rohan

Acest lucru se întâmplă pentru că tu cu cea mai nouă versiune de jquery attr('checked') returnează 'checked' în timp ce prop('checked') returnează true.

Vineeth Bhaskaran

Setați caseta de selectare după încărcarea ferestrei modale. Cred că setați caseta de selectare înainte de a încărca pagina.

$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");

Alemoh Rapheal Baja
<div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" name="quiz_answer" id="customSwitch0">
      <label class="custom-control-label" for="customSwitch0"><span class="fa fa-minus fa-lg mt-1"></span></label>
  </div>

Nu uitați să incrementați atributul id și, respectiv, for. Pentru caseta de selectare a bootstrap-ului adăugat dinamic.

$(document).on('change', '.custom-switch', function(){
    let parent = $(this);
    parent.find('.custom-control-label > span').remove();
    let current_toggle = parent.find('.custom-control-input').attr('id');
    if($('#'+current_toggle+'').prop("checked") == true){
        parent.find('.custom-control-label').append('<span class="fa fa-check fa-lg mt-1"></span>');
    }
    else if($('#'+current_toggle+'').prop("checked") == false){
        parent.find('.custom-control-label').append('<span class="fa fa-minus fa-lg mt-1"></span>');
    }
})