Jak odznaczyć pole wyboru za pomocą biblioteki jQuery Uniform

144

Mam problem z odznaczeniem pliku checkbox. Spójrz na moje jsFiddle , gdzie próbuję:

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

Używam jednolite dla stylizacji checkboxi to po prostu nie działa, aby zaznaczyć / odznaczyćcheckbox .

Jakieś pomysły?

jquery checkbox

— Głosuj za
źródło

zarówno w Google Chrome, jak i Firefoxie nie działa dla mnie

— Upvote

108

Patrząc na swoje dokumenty, mają $.uniform.updatefunkcję odświeżania „umundurowanego” elementu.

Przykład: http://jsfiddle.net/r87NH/4/

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

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

— user113716
źródło

5

@mkoryak: Działa dobrze w programie 1.4.4, ale linki do plików js i css są uszkodzone. Oto zaktualizowane skrzypce. Jeśli masz na myśli, że będzie miał problemy w szczególności 1.6, to prawdopodobnie jest to prawda, ponieważ jQuery zmieniło, a następnie przywróciło zachowanie .attr(). Używając 1.6lub wyższej, naprawdę powinieneś używać .prop().

— user113716,

Nie widzę absolutnie żadnej różnicy między zaktualizowanym jsFiddle a oryginałem (aż do błędnego oznakowania pola wyboru 2), z wyjątkiem tego, że zaktualizowana wersja działa dla mnie, a oryginał nie!?!?

— iPadDeveloper2011,

Swoją drogą, wszystkie te jednolite formy rysowane pikselami wyglądają bardzo nieseksownie na siatkówce.

— wcielenie

nie działa dla mnie również jsfiddle nie działa lub jest mylące

— matthy

367

Prostszym rozwiązaniem jest zrobienie tego zamiast używania uniformu:

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

Nie spowoduje to żadnej zdefiniowanej akcji kliknięcia.

Możesz także użyć:

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

Spowoduje to przełączenie zaznaczenia / odznaczenia pola wyboru, ale spowoduje to również uruchomienie dowolnej zdefiniowanej akcji kliknięcia. Więc uważaj.

EDYCJA : jQuery 1.6+ używa wartości zaznaczonych prop()nie attr()dla pól wyboru

— Panie Hunt
źródło

2

To pozostawia zaznaczony atrybut bez zmian w jQuery 1.7.1. Działa, ale nie robi tego, co Twoim zdaniem powinno.

— 2rs2ts

24

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

To zadziałało dla mnie, spowoduje to odznaczenie pola wyboru. W ten sam sposób możemy użyć

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

aby zaznaczyć pole wyboru.

— user1683014
źródło

4

Myślę, że lepiej jest użyć funkcji .prop () zamiast .attr (). W przeciwnym razie nie zawsze będzie działać zgodnie z oczekiwaniami ...

— Simon Steinberger,

13

Jeśli używasz uniforma 1.5, użyj tej prostej sztuczki, aby dodać lub usunąć atrybut sprawdzenia.
Po prostu dodaj wartość = "sprawdź" w polu wejściowym pola wyboru.
Dodaj ten kod w uniform.js> function doCheckbox(elem){>.click(function(){

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

jeśli nie chcesz dodawać value = "check" w polu wprowadzania danych, ponieważ w niektórych przypadkach dodajesz dwa pola wyboru, więc użyj tego

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

Jeśli używasz uniformu 2.0, użyj tej prostej sztuczki, aby dodać lub usunąć atrybut sprawdzenia
w tej classUpdateChecked($tag, $el, options) {zmianie funkcji

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

Do

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

}

— Sohail Ahmed
źródło

7

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

To zadziałało dla mnie.

— Parijat
źródło

Dziękuję Ci bardzo. Mogę potwierdzić, że jest to najprostsze rozwiązanie.

— Rudolph Opperman

2

Po prostu zrób to:

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

— moledet
źródło

1

musisz zadzwonić, $.uniform.update()jeśli aktualizujesz element za pomocą javascript, jak wspomniano w dokumentacji.

— Adeel
źródło

1

Przede wszystkim checkedmoże mieć wartość checkedlub pusty ciąg.

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

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

— nyuszika7h
źródło

Nie ma nic złego w przekazywaniu wartości logicznej jako wartości checked.

— user113716

Ale nie piszemy znaczników HTML. Ustawiamy właściwość na HTMLInputElement. Zapraszamy do obejrzenia checkednieruchomości.

— user113716

Nieważne… Nie bardzo rozumiem, dlaczego jest nieważne…

— nyuszika7h

przekazywanie wartości logicznej jest obsługiwane tylko w wersji 1.6+, wcześniej trzeba było ustawić atrybut zaznaczony na „zaznaczony” lub go usunąć.

— mkoryak

1

W niektórych przypadkach możesz tego użyć:

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

Do przełączania możesz użyć if else z funkcją

— Larionov Nikita
źródło

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

Rozwiń fragment

— P.Mondal
źródło

0

Innym sposobem jest:

posługiwać się $('#check2').click();

powoduje to, że uniform zaznacza pole wyboru i aktualizuje swoje maski

— Hailwood
źródło

-1

pole wyboru, które działa jak radio btn

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

— RaDo
źródło