Установка "проверил" для флажка с JQuery?
Я хотел бы сделать что-то вроде этого, чтобы отметить checkbox используя jQuery:
$(".myCheckBox").checked(true);
или же
$(".myCheckBox").selected(true);
Существует ли такая вещь?
44 ответа
JQuery 1.6+
Используйте новый .prop() метод:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
jQuery 1.5.x и ниже
.prop() метод недоступен, поэтому вам нужно использовать .attr(),
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
Обратите внимание, что этот подход использовался в модульных тестах jQuery до версии 1.6 и предпочтительнее использования
$('.myCheckbox').removeAttr('checked');
поскольку последний будет, если флажок был первоначально установлен, изменить поведение вызова на .reset() в любой форме, которая его содержит - едва заметное, но, вероятно, нежелательное изменение поведения.
Для большего контекста, некоторые неполные обсуждения изменений в обработке checked атрибут / свойство при переходе с 1.5.x на 1.6 можно найти в примечаниях к выпуску версии 1.6 и в разделе " Атрибуты и свойства " .prop() документация
Любая версия jQuery
Если вы работаете только с одним элементом, вы всегда можете просто изменить HTMLInputElement "s .checked имущество:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
Преимущество использования .prop() а также .attr() Методы вместо этого в том, что они будут работать со всеми соответствующими элементами.
Использование:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
И если вы хотите проверить, установлен ли флажок или нет:
$('.myCheckbox').is(':checked');
Это правильный способ проверки и снятия флажков с помощью jQuery, так как он является кросс-платформенным стандартом и позволяет делать перепосты формы.
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
Делая это, вы используете стандарты 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; });
}
else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
}
return this;
};
})( jQuery );
Кроме того, если вы не хотите использовать плагин, вы можете использовать следующие фрагменты кода:
// Check
$(':checkbox').prop('checked', true);
// Un-check
$(':checkbox').prop('checked', false);
// Toggle
$(':checkbox').prop('checked', function (i, value) {
return !value;
});
Ты можешь сделать
$('.myCheckbox').attr('checked',true) //Standards compliant
или же
$("form #mycheckbox").attr('checked', true)
Если у вас есть специальный код в событии onclick для флажка, который вы хотите снять, используйте вместо этого:
$("#mycheckbox").click();
Вы можете снять галочку, полностью удалив атрибут:
$('.myCheckbox').removeAttr('checked')
Вы можете установить все флажки следующим образом:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
Вы также можете расширить объект $.fn новыми методами:
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
Тогда вы можете просто сделать:
$(":checkbox").check();
$(":checkbox").uncheck();
Или вы можете дать им более уникальные имена, такие как mycheck() и myuncheck(), если вы используете какую-то другую библиотеку, которая использует эти имена.
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
Последний вызовет событие click для флажка, остальные - нет. Так что если у вас есть специальный код в событии onclick для флажка, который вы хотите включить, используйте последний.
Чтобы установить флажок, вы должны использовать
$('.myCheckbox').attr('checked',true);
или же
$('.myCheckbox').attr('checked','checked');
и чтобы снять флажок, вы всегда должны установить его в false:
$('.myCheckbox').attr('checked',false);
Если вы делаете
$('.myCheckbox').removeAttr('checked')
он удаляет атрибут все вместе, и поэтому вы не сможете сбросить форму.
ПЛОХАЯ ДЕМО jQuery 1.6. Я думаю, что это сломано. Для 1.6 я собираюсь сделать новый пост об этом.
NEW WORKING DEMO jQuery 1.5.2 работает в Chrome.
Обе демонстрации используют
$('#tc').click(function() {
if ( $('#myCheckbox').attr('checked')) {
$('#myCheckbox').attr('checked', false);
} else {
$('#myCheckbox').attr('checked', 'checked');
}
});
Это выбирает элементы, которые имеют указанный атрибут со значением, содержащим данную подстроку "ckbItem":
$('input[name *= ckbItem]').prop('checked', true);
Он выберет все элементы, которые содержат ckbItem в своем атрибуте name.
Предполагая, что вопрос...
Как проверить флажок-набор по значению?
Помните, что в типичном наборе флажков все входные теги имеют одинаковое имя, они различаются по атрибутуvalue: для каждого входа набора нет идентификатора.
Ответ Сианя можно расширить с помощью более конкретного селектора, используя следующую строку кода:
$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
Я скучаю по решению. Я всегда буду использовать:
if ($('#myCheckBox:checked').val() !== undefined)
{
//Checked
}
else
{
//Not checked
}
Чтобы установить флажок с использованием jQuery 1.6 или выше, просто сделайте это:
checkbox.prop('checked', true);
Чтобы снять отметку, используйте:
checkbox.prop('checked', false);
Вот что мне нравится использовать для переключения флажка с помощью jQuery:
checkbox.prop('checked', !checkbox.prop('checked'));
Если вы используете jQuery 1.5 или ниже:
checkbox.attr('checked', true);
Чтобы снять отметку, используйте:
checkbox.attr('checked', false);
Вот способ сделать это без JQuery
function addOrAttachListener(el, type, listener, useCapture) {
if (el.addEventListener) {
el.addEventListener(type, listener, useCapture);
} else if (el.attachEvent) {
el.attachEvent("on" + type, listener);
}
};
addOrAttachListener(window, "load", function() {
var cbElem = document.getElementById("cb");
var rcbElem = document.getElementById("rcb");
addOrAttachListener(cbElem, "click", function() {
rcbElem.checked = cbElem.checked;
}, false);
}, false);<label>Click Me!
<input id="cb" type="checkbox" />
</label>
<label>Reflection:
<input id="rcb" type="checkbox" />
</label>Вот код для проверки и снятия отметки с помощью кнопки:
var set=1;
var unset=0;
jQuery( function() {
$( '.checkAll' ).live('click', function() {
$( '.cb-element' ).each(function () {
if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
});
set=unset;
});
});
Обновление: здесь тот же блок кода, использующий более новый метод prop Jquery 1.6+, который заменяет attr:
var set=1;
var unset=0;
jQuery( function() {
$( '.checkAll' ).live('click', function() {
$( '.cb-element' ).each(function () {
if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
});
set=unset;
});
});
Попробуй это:
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
Мы можем использовать elementObject с помощью jQuery для получения проверенного атрибута:
$(objectElement).attr('checked');
Мы можем использовать это для всех версий jQuery без каких-либо ошибок.
Обновление: Jquery 1.6+ имеет новый метод поддержки, который заменяет attr, например:
$(objectElement).prop('checked');
Если вы используете PhoneGap для разработки приложений и у вас есть значение на кнопке, которое вы хотите отобразить мгновенно, не забудьте сделать это
$('span.ui-[controlname]',$('[id]')).text("the value");
Я обнаружил, что без промежутка интерфейс не будет обновляться независимо от того, что вы делаете.
Вот код и демонстрация того, как установить несколько флажков...
http://jsfiddle.net/tamilmani/z8TTt/
$("#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;
}
}
});
Как сказал @livefree75:
jQuery 1.5.x и ниже
Вы также можете расширить объект $.fn новыми методами:
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
Но в новых версиях jQuery мы должны использовать что-то вроде этого:
JQuery 1.6+
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").prop("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").prop("checked",false);
}
});
}(jQuery));
Тогда вы можете просто сделать:
$(":checkbox").check();
$(":checkbox").uncheck();
Другое возможное решение:
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
Для jQuery 1.6+
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
Для jQuery 1.5.x и ниже
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
Проверять,
$('.myCheckbox').removeAttr('checked');
Если вы используете мобильный телефон, и вы хотите, чтобы интерфейс обновлялся и показывал флажок как непроверенный, используйте следующее:
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
Помните об утечках памяти в Internet Explorer до Internet Explorer 9, как указано в документации jQuery:
В Internet Explorer до версии 9 использование.prop () для установки для свойства элемента DOM чего-либо, кроме простого примитивного значения (число, строка или логическое значение), может привести к утечкам памяти, если свойство не удалено (с помощью.removeProp()) до того, как элемент DOM будет удален из документа. Чтобы безопасно установить значения для объектов DOM без утечек памяти, используйте.data ().
Чтобы проверить и снять
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
$('controlCheckBox').click(function(){
var temp = $(this).prop('checked');
$('controlledCheckBoxes').prop('checked', temp);
});
Это, наверное, самое короткое и простое решение:
$(".myCheckBox")[0].checked = true;
или же
$(".myCheckBox")[0].checked = false;
Еще короче будет:
$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;
Вот и jsFiddle.
Простой JavaScript очень прост и намного меньше накладных расходов:
var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
elements[i].checked = true;
}
Когда вы отметили флажок, как;
$('.className').attr('checked', 'checked')
этого может быть недостаточно. Вы также должны вызвать функцию ниже;
$('.className').prop('checked', 'true')
Особенно, когда вы удалили флажок отмеченный атрибут.
Я не мог заставить это работать, используя:
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
И true, и false установили бы флажок. Что сработало для меня:
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
Вот полный ответ, используя jQuery
Я проверяю это и он работает на 100%:D
// 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
});
В случае, если вы используете ASP.NET MVC, создаете много флажков и позже должны выбрать / отменить выбор всех, используя JavaScript, вы можете сделать следующее.
HTML
@foreach (var item in Model)
{
@Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}
JavaScript
function SelectAll() {
$('input[id^="ProductId_"]').each(function () {
$(this).prop('checked', true);
});
}
function UnselectAll() {
$('input[id^="ProductId_"]').each(function () {
$(this).prop('checked', false);
});
}