Я хочу сделать что-то вроде этого, чтобы отметить checkbox
с помощью jQuery:
$(".myCheckBox").checked(true);
or
$(".myCheckBox").selected(true);
Такое существует?
Я хочу сделать что-то вроде этого, чтобы отметить checkbox
с помощью jQuery:
$(".myCheckBox").checked(true);
or
$(".myCheckBox").selected(true);
Такое существует?
Используйте .prop()
:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
Если вы работаете только с одним элементом, вы всегда можете просто получить доступ к базовому HTMLInputElement
< / a> и измените его свойство .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');
, поскольку последний, если изначально был установлен флажок, изменит поведение вызова на _ 12_ в любой форме, которая его содержит - тонкое, но, вероятно, нежелательное изменение поведения.
Для получения дополнительной информации, неполное обсуждение изменений в обработке атрибута / свойства checked
при переходе с 1.5.x на 1.6 можно найти в примечания к выпуску версии 1.6 и раздел Атрибуты и свойства в _ 14_ документация.
DOMElement.checked = true
. Но это было бы ничтожно мало, потому что это всего лишь один элемент ...
- person Tyler Crompton; 30.03.2012
$(element).prop('checked')
- это пустая трата набора текста. element.checked
существует и должен использоваться в тех случаях, когда у вас уже есть element
- person gnarf; 02.10.2012
Использовать:
$(".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).
Решение:
Используя свойство JavaScript "checked" в элементах DOM, мы можем решить проблему напрямую, вместо того, чтобы пытаться манипулировать DOM делать то, что мы хотим.
Этот плагин изменяет отмеченное свойство любых элементов, выбранных 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;
});
removeAttr('checked')
, а не attr('checked', false)
- person Daniel X Moore; 30.01.2012
checked
изменения атрибутов, независимо от метода, использованного для их изменения.
- person cwharris; 30.01.2012
$('.myCheckBox').prop('checked', true)
Таким образом, он будет автоматически применяться ко всему набору совпадающих элементов (однако только при настройке получение по-прежнему будет только первым)
- person Daniel X Moore; 02.02.2012
prop
определенно является подходящим способом установки атрибутов элемента.
- person cwharris; 02.02.2012
Ты можешь сделать
$('.myCheckbox').attr('checked',true) //Standards compliant
or
$("form #mycheckbox").attr('checked', true)
Если у вас есть собственный код в событии onclick для флажка, который вы хотите активировать, используйте его вместо этого:
$("#mycheckbox").click();
Вы можете снять галочку, полностью удалив атрибут:
$('.myCheckbox').removeAttr('checked')
Вы можете установить все флажки следующим образом:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
$(".myCheckbox").click()
- person RobertPitt; 20.09.2010
.attr
вместо .prop
.
- person Blazemonger; 21.01.2014
$("#mycheckbox").click();
работал у меня, так как я тоже слушал событие изменения, а .attr
& .prop
не запускал событие изменения.
- person Damodar Bashyal; 01.05.2017
Вы также можете расширить объект $ .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 (), если вы используете какую-то другую библиотеку, которая использует эти имена.
.attr
вместо .prop
.
- person Blazemonger; 21.01.2014
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
Последний вызовет событие щелчка для флажка, остальные - нет. Поэтому, если у вас есть собственный код в событии onclick для флажка, который вы хотите активировать, используйте последний.
.attr
вместо .prop
.
- person Blazemonger; 21.01.2014
click
ненадежно в Firefox и Edge.
- person Vahid Amiri; 31.08.2019
Чтобы установить флажок, вы должны использовать
$('.myCheckbox').attr('checked',true);
or
$('.myCheckbox').attr('checked','checked');
и чтобы снять флажок, вы всегда должны устанавливать его в false:
$('.myCheckbox').attr('checked',false);
Если вы это сделаете
$('.myCheckbox').removeAttr('checked')
он удаляет атрибут полностью, и поэтому вы не сможете сбросить форму.
ПЛОХОЙ ДЕМО 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');
}
});
$(".mycheckbox").prop("checked", true/false)
- person gnarf; 07.05.2011
.attr()
с логическими атрибутами - хотя я бы хотел, чтобы мы этого не делали - Прочтите: forum.jquery.com/topic/prop-attr-rewrite-again
- person gnarf; 07.05.2011
.attr
уже более двух лет придерживается неправильного подхода к этой проблеме.
- person Blazemonger; 21.01.2014
Это выбирает элементы, которые имеют указанный атрибут со значением, содержащим данную подстроку «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
}
.val()
всегда будет возвращать undefined
при вызове для элементов 0, чтобы определить, что объект jQuery пуст, когда вместо этого вы можете просто проверить его .length
) - см. stackoverflow.com/questions/901712/ для более удобочитаемых подходов.
- person Mark Amery; 15.12.2014
Чтобы установить флажок с помощью 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;
});
});
Обновление: вот тот же блок кода, использующий новый метод Jquery 1.6+ prop, который заменяет 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;
});
});
.attr
вместо .prop
.
- person Blazemonger; 21.01.2014
Попробуй это:
$('#checkboxid').get(0).checked = true; //For checking
$('#checkboxid').get(0).checked = false; //For unchecking
Мы можем использовать elementObject
с jQuery для проверки атрибута:
$(objectElement).attr('checked');
Мы можем использовать это для всех версий jQuery без каких-либо ошибок.
Обновление: JQuery 1.6+ имеет новый метод prop, который заменяет attr, например:
$(objectElement).prop('checked');
.attr
вместо .prop
.
- person Blazemonger; 21.01.2014
Если вы используете 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;
}
}
});
$("#check")
, с необработанными вызовами DOM API, такими как document.getElementsByTagName("input")
, кажется мне неэлегантным, особенно с учетом того, что здесь for
циклов можно было бы избежать, используя .prop()
. Несмотря на это, это еще один поздний ответ, который не добавляет ничего нового.
- person Mark Amery; 15.12.2014
Другое возможное решение:
var c = $("#checkboxid");
if (c.is(":checked")) {
$('#checkboxid').prop('checked', false);
} else {
$('#checkboxid').prop('checked', true);
}
Как сказал @ 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();
Если вы используете мобильный телефон и хотите, чтобы интерфейс обновлялся и показывал, что флажок снят, используйте следующее:
$("#checkbox1").prop('checked', false).checkboxradio("refresh");
Для 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');
Чтобы проверить и снять отметку
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
Помните об утечках памяти в Internet Explorer до Internet Explorer 9, поскольку в документации jQuery говорится:
В Internet Explorer до версии 9 использование .prop () для установки свойства элемента DOM на любое другое значение, кроме простого примитивного значения (число, строка или логическое значение), может вызвать утечку памяти, если свойство не удалено (с помощью .removeProp ( )) до того, как элемент DOM будет удален из документа. Чтобы безопасно устанавливать значения для объектов DOM без утечек памяти, используйте .data ().
.prop('checked',true)
.
- person Blazemonger; 21.01.2014
Это, наверное, самое короткое и простое решение:
$(".myCheckBox")[0].checked = true;
or
$(".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');
И истина, и ложь установят флажок. Для меня сработало:
$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', ''); // For unchecking
true
и false
, а не 'true'
и 'false'
?
- person tpower; 05.01.2012
'false'
был преобразован в логическое значение, что привело к true
- пустая строка оценивается как false
, поэтому это сработало. См. эту скрипку, чтобы понять, что я имею в виду.
- person Shadow Wizard Wearing Mask V2; 24.06.2012
Когда вы отметили галочку вроде:
$('.className').attr('checked', 'checked')
этого может быть недостаточно. Вы также должны вызвать функцию ниже;
$('.className').prop('checked', 'true')
Особенно, когда вы убрали атрибут checkbox checked.
Вот полный ответ с помощью 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, создайте много флажков, а затем установите < em>, чтобы выбрать / отменить выбор всех с помощью 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);
});
}
В jQuery
if($("#checkboxId").is(':checked')){
alert("Checked");
}
or
if($("#checkboxId").attr('checked')==true){
alert("Checked");
}
В JavaScript
if (document.getElementById("checkboxID").checked){
alert("Checked");
}
.attr
вместо .prop
.
- person Blazemonger; 21.01.2014
Это может кому-то помочь.
HTML5
<input id="check_box" type="checkbox" onclick="handleOnClick()">
JavaScript.
function handleOnClick(){
if($("#check_box").prop('checked'))
{
console.log("current state: checked");
}
else
{
console.log("current state: unchecked");
}
}
Если вы используете .prop('checked', true|false)
и не меняли флажок, вам нужно добавить trigger('click')
следующим образом:
// Check
$('#checkboxF1').prop( "checked", true).trigger('click');
// Uncheck
$('#checkboxF1').prop( "checked", false).trigger('click');
Вы можете попробовать это:
$('input[name="activity[task_state]"]').val("specify the value you want to check ")
Вы можете использовать: .prop (propertyName) - < em> добавлена версия: 1.6
p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p></p>
<script>
$( "input" ).change(function() {
var $input = $( this );
$( "p" ).html(
"The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
"The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
"The .is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
</body>
</html>
В вашем .html файле
<input type="checkbox" (change)="toggleEditable($event)">
В вашем TS-файле
toggleEditable(event) {
if ( event.target.checked ) {
this.contentEditable = true;
}
}
В вашем .html файле
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />
Вы можете установить флажок в установленном состоянии, используя JavaScript по-разному. Вы можете увидеть ниже.
Первый способ - $('.myCheckbox').prop('checked', true);
Второй способ - $('.myCheckbox').attr('checked', true);
Третий способ (для проверки условия, если флажок установлен или нет) - $('.myCheckbox').is(':checked')
Если вы используете Bootstrap (возможно, неосознанно) ...
$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')
http://www.bootstraptoggle.com/
Решение JavaScript также может быть простым и с меньшими накладными расходами:
document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)
document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)
checked A: <input type="checkbox" class="myCheckBox"><br/>
unchecked: <input type="checkbox"><br/>
checked B: <input type="checkbox" class="myCheckBox"><br/>
Вы можете сделать это, если у вас есть идентификатор для проверки.
document.getElementById('ElementId').checked = false
И это снять отметку
document.getElementById('ElementId').checked = true
В целом:
$("#checkAll").click(function(){
$(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});
.attr
вместо .prop
.
- person Blazemonger; 21.01.2014
$("#mycheckbox").click();
- person HumanInDisguise   schedule 11.05.2015