Bagaimana menghapus centang pada kotak menggunakan pustaka jQuery Uniform

144

Saya memiliki masalah dengan menghapus centang a checkbox. Lihatlah jsFiddle saya , di mana saya mencoba:

   $("#check2").attr("checked", true);

Saya menggunakan seragam untuk styling checkboxdan itu hanya tidak bekerja untuk memeriksa / hapus centang pada checkbox.

Ada ide?

jquery checkbox

— Suara positif
sumber

baik di google chrome dan firefox tidak berfungsi untuk saya

— Upvote

108

Melihat dokumen mereka, mereka memiliki $.uniform.updatefitur untuk menyegarkan elemen "berseragam".

Contoh: http://jsfiddle.net/r87NH/4/

$("input:checkbox").uniform();

$("body").on("click", "#check1", function () {
    var two = $("#check2").attr("checked", this.checked);
    $.uniform.update(two);
});

— pengguna113716
sumber

5

@mkoryak: Berfungsi dengan baik 1.4.4, tetapi tautan ke file js dan css rusak. Ini biola yang diperbarui. Jika Anda bermaksud bahwa ia akan memiliki masalah khusus 1.6, maka itu mungkin benar karena jQuery mengubah lalu mengembalikan perilaku .attr(). Menggunakan 1.6atau lebih tinggi, Anda harus benar-benar menggunakan .prop().

— user113716

Saya benar-benar tidak dapat melihat perbedaan antara jsFiddle yang diperbarui dan yang asli (sampai pada kesalahan label checkbox 2), kecuali versi yang diperbarui berfungsi untuk saya dan yang asli tidak!?!?

— iPadDeveloper2011

BTW, semua bentuk Seragam yang ditarik piksel ini terlihat sangat aneh di Retina.

— Menjelma

tidak bekerja untuk saya juga jsfiddle tidak bekerja atau membingungkan

— matthy

367

Solusi yang lebih sederhana adalah melakukan ini daripada menggunakan seragam:

$('#check1').prop('checked', true); // will check the checkbox with id check1
$('#check1').prop('checked', false); // will uncheck the checkbox with id check1

Ini tidak akan memicu tindakan klik apa pun yang ditentukan.

Anda juga bisa menggunakan:

$('#check1').click(); //

Ini akan mengaktifkan tanda centang / hapus centang pada kotak centang, tetapi ini juga akan memicu tindakan klik apa pun yang telah Anda tetapkan. Jadi berhati-hatilah.

EDIT : jQuery 1.6+ menggunakan prop()bukan attr()untuk nilai kotak centang diperiksa

— Mr.Hunt
sumber

2

Ini meninggalkan atribut yang diperiksa apa adanya di jQuery 1.7.1 untuk saya. Bekerja tetapi tidak melakukan apa yang Anda pikir seharusnya.

— 2rs2ts

24

$("#chkBox").attr('checked', false);

Ini bekerja untuk saya, ini akan menghapus centang pada kotak centang. Dengan cara yang sama kita bisa menggunakan

$("#chkBox").attr('checked', true);

untuk memeriksa kotak centang.

— pengguna1683014
sumber

4

Saya pikir lebih baik menggunakan fungsi .prop () daripada .attr (). Kalau tidak, itu tidak akan berhasil seperti yang diharapkan ...

— Simon Steinberger

13

Jika Anda menggunakan seragam 1.5 maka gunakan trik sederhana ini untuk menambah atau menghapus atribut centang.
Cukup tambahkan nilai = "centang" di bidang input kotak centang Anda.
Tambahkan kode ini di uniform.js> function doCheckbox(elem){>.click(function(){

if ( $(elem+':checked').val() == 'check' ) {
    $(elem).attr('checked','checked');           
}
else {
    $(elem).removeAttr('checked');
}

jika Anda tidak ingin menambahkan value = "centang" di kotak input Anda karena dalam beberapa kasus Anda menambahkan dua kotak centang jadi gunakan ini

if ($(elem).is(':checked')) {
 $(elem).attr('checked','checked');
}    
else
{    
 $(elem).removeAttr('checked');
}

Jika Anda menggunakan uniform 2.0 maka gunakan trik sederhana ini untuk menambah atau menghapus atribut check
pada classUpdateChecked($tag, $el, options) {perubahan fungsi ini

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
}

Untuk

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
    if (isChecked) {
        $el.attr(c, c);
    } else {
        $el.removeAttr(c);
    }

}

— Sohail Ahmed
sumber

7

$('#check1').prop('checked', true).uniform(); 
$('#check1').prop('checked', false).uniform();

Ini berhasil untuk saya.

— Parijat
sumber

Terima kasih banyak. Saya dapat mengkonfirmasi bahwa ini adalah solusi paling sederhana.

— Rudolph Opperman

2

Lakukan saja ini:

$('#checkbox').prop('checked',true).uniform('refresh');

— moledet
sumber

1

Anda perlu menelepon $.uniform.update()jika Anda memperbarui elemen menggunakan javascript seperti yang disebutkan dalam dokumentasi.

— Adeel
sumber

1

Pertama-tama, checkeddapat memiliki nilai checked, atau string kosong.

$("input:checkbox").uniform();

$('#check1').live('click', function() {
    $('#check2').attr('checked', 'checked').uniform();
});

— nyuszika7h
sumber

Tidak ada yang salah dengan melewatkan nilai boolean checked.

— user113716

Tapi kami tidak menulis markup HTML. Kami sedang mengatur properti di HTMLInputElement. Lihatlah checkedproperti ini.

— user113716

Sudahlah ... Saya juga tidak begitu mengerti mengapa itu tidak valid, baik ...

— nyuszika7h

melewati nilai boolean hanya didukung di 1.6+, sebelum itu Anda harus mengatur atribut yang dicentang ke 'dicentang' atau menghapusnya.

— mkoryak

1

Dalam beberapa kasus, Anda dapat menggunakan ini:

$('.myInput').get(0).checked = true

Untuk beralih, Anda dapat menggunakan fungsi lain dengan fungsi lain

— Larionov Nikita
sumber

1

 $("#checkall").change(function () {
            var checked = $(this).is(':checked');
            if (checked) {
                $(".custom-checkbox").each(function () {
                    $(this).prop("checked", true).uniform();
                });
            } else {
                $(".custom-checkbox").each(function () {
                    $(this).prop("checked", false).uniform();
                });
            }
        });

        // Changing state of CheckAll custom-checkbox
        $(".custom-checkbox").click(function () {
            if ($(".custom-checkbox").length == $(".custom-checkbox:checked").length) {
                $("#chk-all").prop("checked", true).uniform();
            } else {
                $("#chk-all").removeAttr("checked").uniform();
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id='checkall' /> Select All<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="PHP"> PHP<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="AngularJS"> AngularJS<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="Python"> Python<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="Java"> Java<br/>

Luaskan cuplikan

— P.Mondal
sumber

0

Cara lain untuk dilakukan adalah,

menggunakan $('#check2').click();

ini menyebabkan seragam memeriksa kotak centang dan memperbarui topengnya

— Hailwood
sumber

-1

kotak centang yang bertindak seperti radio btn

$(".checkgroup").live('change',function() { var previous=this.checked; $(".checkgroup).attr("checked", false); $(this).attr("checked", previous); });

— RaDo
sumber