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


144

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

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

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

Любые идеи?


и в 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);
});

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()для флажков проверенное значение


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

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

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

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

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


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(); 

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


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


1

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


1

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

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

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

Нет ничего плохого в передаче логического значения в качестве значения 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/>


0

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

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

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


-1

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.