Я хотел бы сделать что-то подобное, чтобы отметить checkbox
с помощью jQuery:
$(".myCheckBox").checked(true);
или
$(".myCheckBox").selected(true);
Существует ли такая вещь?
Я хотел бы сделать что-то подобное, чтобы отметить checkbox
с помощью jQuery:
$(".myCheckBox").checked(true);
или
$(".myCheckBox").selected(true);
Существует ли такая вещь?
Используйте .prop()
:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
Если вы работаете только с одним элементом, вы всегда можете просто получить доступ к базовому HTMLInputElement
и изменить его .checked
свойство:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
Преимущество использования методов .prop()
и .attr()
вместо этого заключается в том, что они будут работать со всеми соответствующими элементами.
Метод .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()
.
Использование:
$(".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 для проверки и снятия флажков, поэтому любой браузер, который правильно реализует свойство "checked" элемента checkbox, будет безупречно работать с этим кодом. Это должны быть все основные браузеры, но я не могу протестировать ранее Internet Explorer 9.
Проблема (jQuery 1.6):
Как только пользователь нажмет на флажок, этот флажок перестает отвечать на изменения атрибута "checked" .
Вот пример атрибута флажка, который не смог выполнить задание после того, как кто-то щелкнул этот флажок (это происходит в Chrome).
Решение:
Используя свойство "checked" JavaScript на элементах DOM, мы можем решить проблему напрямую, вместо того, чтобы пытаться манипулировать DOM, чтобы делать то, что мы хотим это сделать.
Этот плагин изменит свойство checked любых элементов, выбранных 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')
он удаляет атрибут вместе, и поэтому вы не сможете reset создать форму.
BAD DEMO jQuery 1.6. Я думаю, что это сломано. Для 1.6 я собираюсь сделать новое сообщение.
НОВЫЙ РАБОЧИЙ ДЕМО 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>
Попробуйте следующее:
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
Вот код для отмеченного и непроверенного с помощью кнопки:
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;
});
});
Обновление. Вот тот же блок кода, в котором используется новый метод поддержки 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;
});
});
Мы можем использовать elementObject
с jQuery для проверки атрибута:
$(objectElement).attr('checked');
Мы можем использовать это для всех версий jQuery без ошибок.
Обновление: JQuery 1.6+ имеет новый метод prop, который заменяет 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;
}
}
});
Другое возможное решение:
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
Если вы используете мобильный телефон и хотите, чтобы интерфейс обновлялся и отображался флажок как снятый, используйте следующее:
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
Помните об утечках памяти в Internet Explorer перед Internet Explorer 9, как Состояние документации jQuery:
В Internet Explorer до версии 9 с помощью .prop() установите DOM элемент для чего-либо, кроме простого примитивного значения (number, string или boolean) может вызвать утечку памяти, если свойство не удаляется (с использованием .removeProp()) перед удалением элемента DOM из документа. Безопасное задание значений объектов DOM без памяти утечки, используйте .data().
Для 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');
Как сказал @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();
Чтобы проверить и снять флажок
$('.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;
}
Я не мог заставить его работать, используя:
$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');
И true, и false установили флажок. Что для меня работало:
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
Когда вы установили флажок, например:
$('.className').attr('checked', 'checked')
этого может быть недостаточно. Вы также должны вызвать функцию ниже;
$('.className').prop('checked', 'true')
Особенно, когда вы удалили флажок проверять атрибут.
Здесь полный ответ используя 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
});
В jQuery
if($("#checkboxId").is(':checked')){
alert("Checked");
}
или
if($("#checkboxId").attr('checked')==true){
alert("Checked");
}
В JavaScript,
if (document.getElementById("checkboxID").checked){
alert("Checked");
}