Как снять флажок с помощью библиотеки 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
источник

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

Ответы: