kotak centang set jquery dicentang


479

Saya sudah mencoba semua cara yang mungkin, tetapi saya masih belum berhasil. Saya memiliki jendela modal dengan checkboxSaya ingin bahwa ketika modal terbuka, checkboxcentang atau hapus centang harus didasarkan pada nilai basis data. (Saya punya yang sudah bekerja dengan orang lain membentuk bidang.) Saya mulai mencoba memeriksanya tetapi tidak berhasil.

Div html saya:

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

dan jquery:

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

Saya juga mencoba attr, dan yang lain terlihat di sini di forum, tapi sepertinya tidak ada yang berhasil. Bisakah seseorang menunjuk saya dengan cara yang benar?

EDIT: ok, saya benar-benar kehilangan sesuatu di sini ... Saya dapat mencentang / menghapus centang menggunakan kode jika kotak centang ada di halaman, tetapi apakah itu ada di jendela modal, saya tidak bisa. Saya mencoba lusinan cara yang berbeda ...

Saya memiliki tautan yang seharusnya membuka modal:

dan jquery untuk "mendengarkan" klik dan menjalankan beberapa operasi seperti mengisi beberapa kotak teks dengan data yang berasal dari basis data. Semuanya berfungsi seperti yang saya inginkan tetapi masalahnya adalah bahwa saya tidak dapat mengatur kotak centang dicentang / tidak dicentang menggunakan kode. tolonglah!

$(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 its unchecked by default) and it does not work
           $("#estado_cat").prop("checked", true);
        $('#fModal').modal('show');
});
    evt.preventDefault();
    return false;
    });     
});

kelas apa yang diterapkan pada modal div saat modal terbuka? Juga bagaimana Anda memeriksa nilai database - Menggunakan AJAX atau sudah diambil sebelumnya dan disimpan dalam variabel?
user1428716

mengatur kotak centang setelah memuat jendela modal Saya pikir Anda mengatur kotak centang sebelum memuat jendela modal. $ ('# fModal'). modal ('show'); $ ("# estado_cat"). attr ("checked", "checked");
Vineeth Bhaskaran

Jawaban:


805

Anda harus menggunakan fungsi 'prop':

.prop('checked', true);

Sebelum jQuery 1.6 (lihat jawaban user2063626 ):

.attr('checked','checked')

5
Anda sepertinya memiliki jawaban yang benar. Bisakah Anda menguraikan? stackoverflow.com/a/5876747/29182
Ziggy

1
Ini bagus untuk diketahui. Mengabaikan hal ini ketika melihat dokumentasi migrasi jQuery 3.3.x
reaper_unique

1
Senang mengetahui bahwa Anda tidak dapat menggunakan attr di versi yang lebih baru dari jQuery seperti yang saya pikir pada awalnya
Kaloyan

75

Mengambil semua jawaban yang diajukan dan menerapkannya pada situasi saya - mencoba mencentang atau menghapus centang pada kotak centang berdasarkan nilai yang diambil dari true (harus centang kotak) atau false (tidak boleh centang kotak) - Saya mencoba semua hal di atas dan menemukan bahwa menggunakan .prop ("dicentang", true) dan .prop ("dicentang", false ) adalah solusi yang tepat.

Saya belum bisa menambahkan komentar atau jawaban, tetapi saya merasa ini cukup penting untuk ditambahkan ke percakapan.

Berikut ini adalah kode lama untuk modifikasi kalender penuh yang mengatakan jika nilai yang diambil "allDay" benar, lalu centang kotak centang dengan ID "even_allday_yn":

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

48
Mengapa tidak hanya pada satu baris? $( "#even_allday_yn").prop('checked', allDay);
Xavier Hayoz

3
Dia berusaha menunjukkan nilai-nilai yang mungkin. Bagaimana Anda tahu nilai sebenarnya dari "allDay" tanpa contoh seperti ini di sini?
Soroush Falahati

1
@Xavier Hayoz. Ini berfungsi jika, dan hanya jika, allDay mengembalikan 'true' atau 'false' sebagai nilai litteral - bukan nilai biner murni. Kotak centang dirancang dengan buruk dalam html dan statusnya yang dicentang dapat diekspresikan dengan cara yang sangat berbeda. Yang aman dan satu-satunya cara yang saya tahu adalah: allDay === 'true'? $ ('# even_allday_yn) .prop ("dicentang", true): $ (' # even_allday_yn) .prop ("dicentang", false). Perhatikan operator kesetaraan yang ketat.
Brice Coustillas

1
$('#even_allday_yn').prop('checked', allDay === true)akan bekerja karena allDay === truememberikan hasil boolean.
leftclickben

58

Bung coba kode di bawah ini:

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

ATAU

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

ATAU

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

26
Seperti dalam jawaban KeyOfJ, gunakan .prop('checked', true)bukannya attr- Saya hanya mengalami masalah yang sama, dan propberfungsi.
semmelbroesel

3
FYI jika Anda ingin menggunakan :checkedpseudo-selector atau fitur HTML kotak centang asli lainnya, Anda harus menggunakan .prop.
benastan

1
Mencoba ini dan itu tidak berhasil tetapi ketika saya mengubah kode menjadi $ ("div.row-form #estado_cat"). Prop ("checked", "checked"); itu berhasil. (Berubah attr ke prop).
Jim Evans

1
Sayangnya prop adalah jQuery 1.6 dan lebih tinggi, jadi jika Anda terjebak dalam kerangka kerja warisan yang tidak akan bekerja untuk Anda
wolffer-east

.attr()adalah cara untuk menggunakan versi sebelumnya, .prop()untuk jQuery 1.6+.
vapcguy

26

"centang" atribut 'centang' kotak centang segera setelah ada. Jadi, untuk mencentang / menghapus centang pada kotak centang, Anda harus mengatur / membatalkan pengaturan atribut.

Untuk memeriksa kotak:

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

Untuk menghapus centang pada kotak:

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

Untuk menguji status yang diperiksa:

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

Semoga ini bisa membantu ...


19

Karena Anda berada di jendela modal (baik dinamis atau di halaman), Anda dapat menggunakan kode berikut untuk mencapai tujuan Anda: (Saya mengalami masalah yang sama di situs saya dan ini adalah cara saya memperbaikinya)

HTML:

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

KODE:

$.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;
    }

Dalam "kendoWindow" di atas adalah jendela saya (milik saya dinamis, tetapi saya juga melakukan ini ketika menambahkan ke elemen langsung di halaman). Saya mengulang melalui array data ("queriesToAddToGroup") untuk melihat apakah ada baris yang memiliki atribut COPY. Jika demikian, saya ingin mengaktifkan kotak centang di dalam jendela yang menetapkan atribut itu ketika pengguna menyimpan dari jendela ini.


4
Perlu dicatat bahwa sementara jawaban lain untuk pertanyaan yang ada mungkin "bekerja", menggunakan propseperti jawaban ini menunjukkan adalah cara yang BENAR untuk mencapai checkbox jQuery dinamis memeriksa / tidak mencentang.
Joshua Burns

11
.attr("checked",true)
.attr("checked",false)

akan bekerja. Pastikan benar dan salah tidak ada di dalam tanda kutip.


1
Attr tidak akan mencentang kotak, prop adalah orang yang melakukan pemeriksaan. Suka .prop('checked', true); Info lebih lanjut di Posting ini
casivaagustin

@casivaagustin Tergantung pada versi jQuery. Saya percaya lebih awal dari jQuery 1.6, .attr()berhasil, seperti yang dijelaskan.
vapcguy

5

Anda dapat menulis seperti di bawah ini kode yang diberikan.

HTML

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

jQuery

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

Semoga ini berhasil untuk Anda.


4

Jika Anda ingin menggunakan fungsionalitas ini untuk skrip GreaseMonkey untuk secara otomatis memeriksa kotak centang pada halaman, ingatlah bahwa hanya dengan menyetel properti yang dicentang mungkin tidak memicu tindakan yang terkait. Dalam hal itu, "mengklik" kotak centang mungkin akan (dan mengatur properti yang dicentang juga).

$("#id").click()

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

Find akan mengembalikan array, jadi gunakan [0] untuk mendapatkan bahkan jika hanya ada satu item

jika Anda tidak menggunakan find maka

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

ini bekerja dengan baik di Mozilla Firefox untuk saya


1
Ini bekerja, semua solusi lain tidak terdeteksi jika Anda memiliki: gaya dicentang di css Anda
bhappy


2

Coba ini karena Anda menggunakan jQuery UI mungkin (jika tidak silakan komentar)

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

    }
   });

@ user2063626 - bagian dari js di dalam fungsi disalin dari jawaban Anda
user1428716

2

Sudahkah Anda mencoba menjalankan $("#estado_cat").checkboxradio("refresh")pada kotak centang Anda?


2

Ini bekerja.

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

2

Saya juga mengalami masalah ini.

dan ini adalah kode lama saya tidak berfungsi

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

di sini adalah kode baru saya yang berfungsi sekarang:

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

jadi, kuncinya adalah sebelum bekerja, pastikan properti yang dicentang ada dan tidak dihapus.


Jauh lebih sederhana:Jbookaccess.prop("checked", data.access != 'private');
Legionar

2

Ini terjadi karena Anda dengan versi terbaru dari jquery attr('checked')kembali 'checked'ketika prop('checked')kembali true.


2
<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>

ini berfungsi baik di chrome dan firefox
reza akhlaghi

1

Setel kotak centang setelah memuat jendela modal. Saya pikir Anda sedang mengatur kotak centang sebelum memuat halaman.

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

1

Saya tahu ini meminta solusi Jquery, tapi saya hanya ingin menunjukkan bahwa sangat mudah untuk mengaktifkannya dalam javascript biasa.

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

Ini akan bekerja di semua versi saat ini dan masa depan.


0
<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>

Ingatlah untuk meningkatkan id dan atribut masing-masing. Untuk kotak centang Bootstrap yang ditambahkan secara dinamis.

$(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>');
    }
})
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.