Современный jQuery

Используйте .prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

DOM API

Если вы работаете только с одним элементом, вы всегда можете просто получить доступ к базовому HTMLInputElement < / a> и измените его свойство .checked:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

Преимущество использования методов .prop() и .attr() вместо этого заключается в том, что они будут работать со всеми совпадающими элементами.

jQuery 1.5.x и ниже

Метод .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_ документация.

Использовать:

$(".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).

Fiddle

Решение:

Используя свойство JavaScript "checked" в элементах DOM, мы можем решить проблему напрямую, вместо того, чтобы пытаться манипулировать DOM делать то, что мы хотим.

Fiddle

Этот плагин изменяет отмеченное свойство любых элементов, выбранных 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

or

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

Последний вызовет событие щелчка для флажка, остальные - нет. Поэтому, если у вас есть собственный код в событии onclick для флажка, который вы хотите активировать, используйте последний.

Чтобы установить флажок, вы должны использовать

 $('.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');
    }
});

Это выбирает элементы, которые имеют указанный атрибут со значением, содержащим данную подстроку «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;
    });
});

Обновление: вот тот же блок кода, использующий новый метод 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;
    });
});

Попробуй это:

$('#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');

Если вы используете 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);
    }

Как сказал @ 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 ().

Это, наверное, самое короткое и простое решение:

$(".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

Когда вы отметили галочку вроде:

$('.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");
}

Это может кому-то помочь.

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 ")

Отредактировано в январе 2019 г.

Вы можете использовать: .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>

На Angular Framework

Пример 1

В вашем .html файле

<input type="checkbox" (change)="toggleEditable($event)">

В вашем TS-файле

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

Пример 2

В вашем .html файле

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />

Вы можете установить флажок в установленном состоянии, используя JavaScript по-разному. Вы можете увидеть ниже.

1. Первый способ - $('.myCheckbox').prop('checked', true);

2. Второй способ - $('.myCheckbox').attr('checked', true);

3. Третий способ (для проверки условия, если флажок установлен или нет) - $('.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);
});