Более конкретный (и очень полезный!) Вопрос: «Как проверить элемент в наборе флажков BY VALUE?», Я думаю, что мы также можем обсудить здесь, и я разместил ответ ниже.
Если вы работаете только с одним элементом, вы всегда можете просто получить доступ к базовому элементу HTMLInputElementи изменить его .checkedсвойство:
Обратите внимание, что этот подход использовался в модульных тестах jQuery до версии 1.6, и его предпочтительнее использовать, $('.myCheckbox').removeAttr('checked');поскольку последний, если флажок был изначально установлен, изменит поведение вызова в .reset()любой форме, которая его содержит - тонкий, но, вероятно, нежелательное изменение поведения.
Для большего контекста некоторые неполные обсуждения изменений в обработке checkedатрибута / свойства при переходе с 1.5.x на 1.6 можно найти в примечаниях к выпуску версии 1.6 и в разделе « Атрибуты и свойства » .prop()документации .
@Xian удаление атрибута флажка делает невозможным сброс формы
mcgrailm
6
В качестве примечания, jQuery 1.6.1 должен исправить проблему, о которой я говорил, так что мы все технически можем вернуться к использованию $ (...). Prop (...)
cwharris
19
«Если вы работаете только с одним элементом, он всегда будет самым быстрым в использовании DOMElement.checked = true». Но это было бы незначительным, потому что это только один элемент ...
Тайлер Кромптон
47
Как говорит Тайлер, это незначительное улучшение производительности. Для меня кодирование с использованием общего API делает его более читабельным, чем смешивание нативного API и API jQuery. Я бы придерживался jQuery.
Чарли Килиан
18
@TylerCrompton - Конечно, речь идет не только о производительности, но $(element).prop('checked')это полная трата текста. element.checkedсуществует и должен использоваться в тех случаях, когда у вас уже естьelement
Я попробовал этот точный код, и он не работал для меня в случае флажка «выбрать все / выбрать нет», который должен проверять и снимать все, а также проверять их состояние. Вместо этого я попробовал ответ @Christopher Harris, и это помогло.
ДД Смит
Почему вместо «#mycheckbox» используется «form #mycheckbox»? Идентификатор уже уникален во всем документе, его проще и быстрее выбрать.
ЮрийАльбукерке
@YuriAlbuquerque это был пример. Вы можете использовать любой селектор, который вы хотите.
bchhun
5
$ (селектор) .checked не работает. В jQuery нет метода «проверено».
Брендан Берд
318
Это правильный способ проверки и убрав галочки с JQuery, так как это является стандартным кросс-платформенный, и будет позволять форму чаще делились.
Делая это, вы используете стандарты JavaScript для проверки и снятия флажков, поэтому любой браузер, который правильно реализует свойство «флажок» элемента флажка, будет выполнять этот код без нареканий. Это должны быть все основные браузеры, но я не могу протестировать предыдущий Internet Explorer 9.
Проблема (jQuery 1.6):
Когда пользователь нажимает на флажок, этот флажок перестает отвечать на изменения атрибута «флажок».
Вот пример атрибута checkbox, не выполняющего работу после того, как кто-то щелкнул по флажку (это происходит в Chrome).
Используя JavaScript-проверенное свойство для элементов DOM , мы можем решить проблему напрямую, вместо того, чтобы пытаться манипулировать DOM, выполняя то, что мы хотим .
Этот плагин будет изменять свойство selected любых элементов, выбранных jQuery, и успешно устанавливать и снимать флажки при любых обстоятельствах. Таким образом, хотя это может показаться чрезмерным решением, оно улучшит пользовательский интерфейс вашего сайта и поможет предотвратить разочарование пользователей.
(function( $ ){
$.fn.checked =function(value){if(value ===true|| value ===false){// Set the value of the checkbox
$(this).each(function(){this.checked = value;});}elseif(value ===undefined|| value ==='toggle'){// Toggle the checkbox
$(this).each(function(){this.checked =!this.checked;});}returnthis;};})( jQuery );
Кроме того, если вы не хотите использовать плагин, вы можете использовать следующие фрагменты кода:
В вашем первом примере JSFiddle вы должны использовать, removeAttr('checked')а неattr('checked', false)
Daniel X Moore
4
@DanielXMoore, вы обходите проблему. Примером было показать, что после того, как пользователь установил флажок, браузер больше не реагирует на checkedизменения атрибутов, независимо от способа их изменения.
cwharris
3
@ChristopherHarris Хорошо, ты прав, я пропустил это. Начиная с jQuery 1.6, разве вы не должны использовать метод .prop? $('.myCheckBox').prop('checked', true)Таким образом, он будет автоматически применяться ко всему набору совпадающих элементов (только при настройке, получение все еще только первый)
Даниэль Х Мур
Да. propэто определенно подходящий способ установить атрибуты элемента.
cwharris
@ChristopherHarris, я добавил в плагин то, что мне было нужно, чтобы обеспечить некоторую гибкость параметров. Это облегчает встроенную обработку без преобразования типов. Esp из разрозненных баз данных с «идеями» о том, что такое «правда». Скрипка: jsfiddle.net/Cyberjetx/vcp96
Или вы можете дать им более уникальные имена, такие как mycheck () и myuncheck (), если вы используете какую-то другую библиотеку, которая использует эти имена.
Последний вызовет событие click для флажка, остальные - нет. Поэтому, если у вас есть специальный код в событии onclick для флажка, который вы хотите включить, используйте последний.
Это неточно. установка атрибута 'checked' в '' не снимает флажки, по крайней мере, в Chrome.
cwharris
@xixonia Я проверил, прежде чем опубликовать вашу скрипку, не работает, потому что вы не изменили меню слева, чтобы включить jquery
mcgrailm
1
McGralim - в 1.6 это еще проще .... $(".mycheckbox").prop("checked", true/false)
Gnarf
2
@MarkAmery вы упомянули, что мой пост ничего не добавил во время поста, но это точно. Если вы посмотрите историю принятых ответов, то обнаружите, что они предлагают удалить элемент. Что делает невозможным сброс формы, именно поэтому я отправил для начала.
mcgrailm 15.12.14
1
@mcgrailm Я пошел дальше и изменил принятый ответ в свете ваших замечаний. Если вы хотите взглянуть на него и убедиться, что он выглядит хорошо в его текущем состоянии, я был бы признателен за это. Еще раз извиняюсь за резкую критику, которая была, по крайней мере, частично ошибочной.
Марк Амери
51
Это выбирает элементы, которые имеют указанный атрибут со значением, содержащим данную подстроку "ckbItem":
$('input[name *= ckbItem]').prop('checked',true);
Он выберет все элементы, которые содержат ckbItem в своем атрибуте имени.
Помните, что в типичном наборе флажков все входные теги имеют одинаковое имя, они различаются по атрибутуvalue : для каждого входа набора нет идентификатора.
Ответ Сианя можно расширить с помощью более конкретного селектора , используя следующую строку кода:
Это не отвечает на вопрос (вопрос заключается в том, чтобы установить , установлен ли флажок, а не в том, установлен ли флажок). Это также довольно уродливый способ определить, установлен ли флажок (во-первых, вы используете неочевидный факт, .val()который всегда будет возвращаться undefinedпри вызове 0 элементов, чтобы обнаружить, что объект jQuery пуст, когда вы могли бы просто проверьте его .lengthвместо этого) - см. stackoverflow.com/questions/901712/… для более удобочитаемых подходов.
Марк Амери
42
Чтобы установить флажок с использованием jQuery 1.6 или выше, просто сделайте это:
checkbox.prop('checked',true);
Чтобы снять отметку, используйте:
checkbox.prop('checked',false);
Вот что мне нравится использовать для переключения флажка с помощью jQuery:
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger
25
Если вы используете PhoneGap для разработки приложений и у вас есть значение на кнопке, которое вы хотите отобразить мгновенно, не забудьте сделать это
$("#check").on("click",function(){var chk = document.getElementById('check').checked;var arr = document.getElementsByTagName("input");if(chk){for(var i in arr){if(arr[i].name =='check') arr[i].checked =true;}}else{for(var i in arr){if(arr[i].name =='check') arr[i].checked =false;}}});
- 1; Смешивание селекторов jQuery, как $("#check")с необработанными вызовами API DOM, document.getElementsByTagName("input")кажется мне неуместным, особенно если учесть, что использование forциклов можно избежать .prop(). Несмотря на это, это еще один поздний ответ, который не добавляет ничего нового.
Марк Амери
20
Другое возможное решение:
var c = $("#checkboxid");if(c.is(":checked")){
$('#checkboxid').prop('checked',false);}else{
$('#checkboxid').prop('checked',true);}
В Internet Explorer до версии 9 использование .prop () для установки для свойства элемента DOM чего-либо, кроме простого примитивного значения (число, строка или логическое значение), может привести к утечкам памяти, если свойство не удаляется (используя .removeProp ( )) до того, как элемент DOM будет удален из документа. Чтобы безопасно установить значения для объектов DOM без утечек памяти, используйте .data ().
Это «не сработало», потому что 'false'было преобразовано в логическое значение, в результате чего true- пустая строка вычисляет, falseтаким образом, это «сработало». Посмотрите эту скрипку для примера того, что я имею в виду.
Shadow Wizard - это ухо для тебя
@ chris97ong Я откатил твою правку; когда кто-то говорит: «Не используйте приведенный ниже код, потому что он не работает», исправление этого кода при оставлении комментария о том, что он не работает, вредно, особенно когда оно нарушает объяснение в комментариях, почему код не работает. не работает Тем не менее, этот ответ все еще несколько запутан и заслуживает отрицательного ответа по причинам, указанным tpower и ShadowWizard.
Марк Амери
1
используйте значения true и false для логического значения, не используйте 'true' или 'false' (строки).
Джоне Полвора
13
Когда вы отметили флажок, как;
$('.className').attr('checked','checked')
этого может быть недостаточно. Вы также должны вызвать функцию ниже;
$('.className').prop('checked','true')
Особенно, когда вы удалили флажок отмечен атрибут.
// when the button (select_unit_button) is clicked it returns all the checed checkboxes values
$("#select_unit_button").on("click",function(e){var arr =[];
$(':checkbox:checked').each(function(i){
arr[i]= $(this).val();// u can get id or anything else});//console.log(arr); // u can test it using this in google chrome});
$("#mycheckbox").click();
Ответы:
Современный jQuery
Используйте
.prop()
:DOM API
Если вы работаете только с одним элементом, вы всегда можете просто получить доступ к базовому элементу
HTMLInputElement
и изменить его.checked
свойство:Выгода для использования
.prop()
и.attr()
методов вместо этого является то , что они будут работать на все соответствующие элементы.JQuery 1.5.x и ниже
.prop()
Метод не доступен, так что вам нужно использовать.attr()
.Обратите внимание, что этот подход использовался в модульных тестах jQuery до версии 1.6, и его предпочтительнее использовать,
$('.myCheckbox').removeAttr('checked');
поскольку последний, если флажок был изначально установлен, изменит поведение вызова в.reset()
любой форме, которая его содержит - тонкий, но, вероятно, нежелательное изменение поведения.Для большего контекста некоторые неполные обсуждения изменений в обработке
checked
атрибута / свойства при переходе с 1.5.x на 1.6 можно найти в примечаниях к выпуску версии 1.6 и в разделе « Атрибуты и свойства ».prop()
документации .источник
DOMElement.checked = true
». Но это было бы незначительным, потому что это только один элемент ...$(element).prop('checked')
это полная трата текста.element.checked
существует и должен использоваться в тех случаях, когда у вас уже естьelement
Использование:
И если вы хотите проверить, установлен ли флажок или нет:
источник
Это правильный способ проверки и убрав галочки с JQuery, так как это является стандартным кросс-платформенный, и будет позволять форму чаще делились.
Делая это, вы используете стандарты JavaScript для проверки и снятия флажков, поэтому любой браузер, который правильно реализует свойство «флажок» элемента флажка, будет выполнять этот код без нареканий. Это должны быть все основные браузеры, но я не могу протестировать предыдущий Internet Explorer 9.
Проблема (jQuery 1.6):
Когда пользователь нажимает на флажок, этот флажок перестает отвечать на изменения атрибута «флажок».
Вот пример атрибута checkbox, не выполняющего работу после того, как кто-то щелкнул по флажку (это происходит в Chrome).
скрипка
Решение:
Используя JavaScript-проверенное свойство для элементов DOM , мы можем решить проблему напрямую, вместо того, чтобы пытаться манипулировать DOM, выполняя то, что мы хотим .
скрипка
Этот плагин будет изменять свойство selected любых элементов, выбранных jQuery, и успешно устанавливать и снимать флажки при любых обстоятельствах. Таким образом, хотя это может показаться чрезмерным решением, оно улучшит пользовательский интерфейс вашего сайта и поможет предотвратить разочарование пользователей.
Кроме того, если вы не хотите использовать плагин, вы можете использовать следующие фрагменты кода:
источник
removeAttr('checked')
а неattr('checked', false)
checked
изменения атрибутов, независимо от способа их изменения.$('.myCheckBox').prop('checked', true)
Таким образом, он будет автоматически применяться ко всему набору совпадающих элементов (только при настройке, получение все еще только первый)prop
это определенно подходящий способ установить атрибуты элемента.Ты можешь сделать
или
Если у вас есть специальный код в событии onclick для флажка, который вы хотите снять, используйте этот вместо:
Вы можете снять галочку, удалив атрибут полностью:
Вы можете проверить все флажки, как это:
источник
$(".myCheckbox").click()
.attr
вместо.prop
.$("#mycheckbox").click();
работал для меня , как я слушал событие изменения также и.attr
&.prop
не срабатывало событие изменения.Вы также можете расширить объект $ .fn новыми методами:
Тогда вы можете просто сделать:
Или вы можете дать им более уникальные имена, такие как mycheck () и myuncheck (), если вы используете какую-то другую библиотеку, которая использует эти имена.
источник
.attr
вместо.prop
.Последний вызовет событие click для флажка, остальные - нет. Поэтому, если у вас есть специальный код в событии onclick для флажка, который вы хотите включить, используйте последний.
источник
.attr
вместо.prop
.click
событие ненадежно в Firefox и Edge.Чтобы установить флажок, вы должны использовать
или
и чтобы снять флажок, вы всегда должны установить его в false:
Если вы делаете
он удаляет атрибут все вместе, и поэтому вы не сможете сбросить форму.
ПЛОХО ДЕМО JQuery 1.6 . Я думаю, что это сломано. Для 1.6 я собираюсь сделать новый пост об этом.
NEW WORKING DEMO jQuery 1.5.2 работает в Chrome.
Обе демонстрации используют
источник
$(".mycheckbox").prop("checked", true/false)
Это выбирает элементы, которые имеют указанный атрибут со значением, содержащим данную подстроку "ckbItem":
Он выберет все элементы, которые содержат ckbItem в своем атрибуте имени.
источник
Предполагая, что вопрос ...
Как проверить флажок-набор по значению?
Помните, что в типичном наборе флажков все входные теги имеют одинаковое имя, они различаются по атрибуту
value
: для каждого входа набора нет идентификатора.Ответ Сианя можно расширить с помощью более конкретного селектора , используя следующую строку кода:
источник
Я скучаю по решению. Я всегда буду использовать:
источник
.val()
который всегда будет возвращатьсяundefined
при вызове 0 элементов, чтобы обнаружить, что объект jQuery пуст, когда вы могли бы просто проверьте его.length
вместо этого) - см. stackoverflow.com/questions/901712/… для более удобочитаемых подходов.Чтобы установить флажок с использованием jQuery 1.6 или выше, просто сделайте это:
Чтобы снять отметку, используйте:
Вот что мне нравится использовать для переключения флажка с помощью jQuery:
Если вы используете jQuery 1.5 или ниже:
Чтобы снять отметку, используйте:
источник
Вот способ сделать это без JQuery
источник
Вот код для проверки и снятия отметки с помощью кнопки:
Обновление: здесь тот же блок кода, использующий более новый метод prop Jquery 1.6+, который заменяет attr:
источник
.attr
вместо.prop
.Попробуй это:
источник
Мы можем использовать
elementObject
с jQuery для проверки атрибута:Мы можем использовать это для всех версий jQuery без каких-либо ошибок.
Обновление: Jquery 1.6+ имеет новый метод prop, который заменяет attr, например:
источник
.attr
вместо.prop
.Если вы используете PhoneGap для разработки приложений и у вас есть значение на кнопке, которое вы хотите отобразить мгновенно, не забудьте сделать это
Я обнаружил, что без пролета интерфейс не будет обновляться независимо от того, что вы делаете.
источник
Вот код и демонстрация того, как установить несколько флажков ...
http://jsfiddle.net/tamilmani/z8TTt/
источник
$("#check")
с необработанными вызовами API DOM,document.getElementsByTagName("input")
кажется мне неуместным, особенно если учесть, что использованиеfor
циклов можно избежать.prop()
. Несмотря на это, это еще один поздний ответ, который не добавляет ничего нового.Другое возможное решение:
источник
Как сказал @ livefree75:
JQuery 1.5.x и ниже
Вы также можете расширить объект $ .fn новыми методами:
Но в новых версиях jQuery мы должны использовать что-то вроде этого:
JQuery 1.6+
Тогда вы можете просто сделать:
источник
Если вы используете мобильный телефон, и вы хотите, чтобы интерфейс обновлялся и показывал флажок как непроверенный, используйте следующее:
источник
Помните об утечках памяти в Internet Explorer до Internet Explorer 9 , как указано в документации jQuery :
источник
.prop('checked',true)
.Для jQuery 1.6+
Для jQuery 1.5.x и ниже
Проверить,
источник
Чтобы проверить и снять
источник
источник
Это, вероятно, самое короткое и простое решение:
или
Еще короче было бы:
Вот и jsFiddle .
источник
Простой JavaScript очень прост и намного меньше накладных расходов:
Пример здесь
источник
Я не мог заставить это работать, используя:
И true, и false установили бы флажок. Что сработало для меня:
источник
true
иfalse
и не'true'
и'false'
?'false'
было преобразовано в логическое значение, в результате чегоtrue
- пустая строка вычисляет,false
таким образом, это «сработало». Посмотрите эту скрипку для примера того, что я имею в виду.Когда вы отметили флажок, как;
этого может быть недостаточно. Вы также должны вызвать функцию ниже;
Особенно, когда вы удалили флажок отмечен атрибут.
источник
Вот полный ответ, используя jQuery
Я проверяю это и работает на 100%: D
источник
В jQuery,
или
В JavaScript
источник
.attr
вместо.prop
.