Как снять флажок с помощью библиотеки jQuery Uniform

144

У меня проблема с снятием отметки checkbox. Посмотрите на мою jsFiddle , где я пытаюсь :

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

Я использую форму для стилизации checkboxи он просто не работает , чтобы проверить / снимите флажокcheckbox .

Любые идеи?

jquery checkbox

— Upvote
источник

и в Google Chrome и Firefox это не работает для меня

— Upvote

108

Глядя на свои документы, у них есть $.uniform.updateвозможность обновить элемент в форме.

Пример: http://jsfiddle.net/r87NH/4/

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

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

— user113716
источник

5

@mkoryak: Хорошо работает 1.4.4, но ссылки на файлы js и css были повреждены. Вот обновленная скрипка. Если вы имеете в виду, что у него будут проблемы именно в этом 1.6, то, вероятно, это так, поскольку jQuery изменился, а затем изменил поведение .attr(). Используя 1.6или выше, вы действительно должны использовать .prop().

— user113716

Я не вижу абсолютно никакой разницы между обновленным jsFiddle и оригиналом (вплоть до неправильной маркировки флажка 2), за исключением того, что обновленная версия работает для меня, а оригинал не работает!?!?

— iPadDeveloper2011

Кстати, все эти нарисованные пикселями униформные формы выглядят очень неприлично на Retina.

— Воплощён

у меня не работает также jsfiddle не работает или сбивает с толку

— matthy

367

Более простое решение - сделать это, а не использовать форму:

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

Это не будет запускать какое-либо определенное действие щелчка.

Вы также можете использовать:

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

Это переключит флажок / снимает флажок для флажка, но также будет запускать любое действие щелчка, которое вы определили. Так что будьте осторожны.

РЕДАКТИРОВАТЬ : jQuery 1.6+ использует prop()не attr()для флажков проверенное значение

— Mr.Hunt
источник

2

Это оставляет проверенный атрибут как есть в jQuery 1.7.1 для меня. Работает, но не делает то, что, как вы думаете, должно.

— 2rs2ts

24

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

Это сработало для меня, это снимет флажок. Точно так же мы можем использовать

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

проверить флажок.

— user1683014
источник

4

Я думаю, что лучше использовать функцию .prop () вместо .attr (). В противном случае это не будет работать всегда, как ожидалось ...

— Саймон Стейнбергер

13

Если вы используете униформу 1.5, используйте этот простой трюк для добавления или удаления атрибута check.
Просто добавьте value = "check" в поле ввода вашего флажка.
Добавьте этот код в uniform.js> function doCheckbox(elem){>.click(function(){

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

если вы не хотите добавлять значение = "check" в поле ввода, потому что в некоторых случаях вы добавляете два флажка, так что используйте это

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

Если вы используете форму 2.0, используйте этот простой трюк, чтобы добавить или удалить атрибут проверки
в этой classUpdateChecked($tag, $el, options) {функции.

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

к

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

}

— Сохейл Ахмед
источник

7

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

Это сработало для меня.

— Parijat
источник

Большое спасибо. Я могу подтвердить, что это самое простое решение.

— Рудольф Опперман

2

Просто сделай это:

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

— Моледет
источник

1

вам нужно позвонить, $.uniform.update()если вы обновляете элемент, используя javascript, как указано в документации.

— Adeel
источник

1

Прежде всего, checkedможет иметь значение checkedили пустую строку.

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

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

— nyuszika7h
источник

Нет ничего плохого в передаче логического значения в качестве значения checked.

— user113716

Но мы не пишем разметку HTML. Мы устанавливаем свойство на HTMLInputElement. Посмотрите на checkedимущество.

— user113716

Не берите в голову ... я действительно не понимаю, почему это недействительно, также ...

— nyuszika7h

Передача логического значения поддерживается только в версии 1.6+, перед этим вам нужно было установить для проверенного атрибута значение «флажок» или удалить его.

— mkoryak

1

В некоторых случаях вы можете использовать это:

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

Для переключения можно использовать if else с функцией

— Ларионов Никита
источник

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

Развернуть фрагмент

— P.Mondal
источник

0

Другой способ сделать это,

использование $('#check2').click();

это вызывает униформу, чтобы проверить флажок и обновить его маски

— Hailwood
источник

-1

флажок, который действует как радио BTN

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

— RaDo
источник