Ты можешь сделать

$('.myCheckbox').attr('checked',true) //Standards compliant

или же

$("form #mycheckbox").attr('checked', true)

Если у вас есть собственный код в событии onclick для флажка, который вы хотите активировать, используйте его вместо этого:

$("#mycheckbox").click();

Вы можете снять галочку, полностью удалив атрибут:

$('.myCheckbox').removeAttr('checked')

Вы можете установить все флажки следующим образом:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

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

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

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

DOM API

Если вы работаете только с одним элементом, вы всегда можете просто получить доступ к базовому HTMLInputElement и изменить его свойство .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');, поскольку последний, если изначально был установлен флажок, изменит поведение вызова .reset() в любой форме, которая его содержит - тонкое, но, вероятно, нежелательное изменение поведения.

Для большего контекста некоторые неполные обсуждения изменений в обработке атрибута / свойства checked при переходе с 1.5.x на 1.6 можно найти в разделах примечания к выпуску версии 1.6 и Атрибуты против свойств.prop() документация.

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

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

И если вы хотите проверить, установлен ли флажок:

$('.myCheckbox').is(':checked');

$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

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

Вы также можете расширить объект $ .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 (), если вы используете какую-то другую библиотеку, которая использует эти имена.

Это выбирает элементы, которые имеют указанный атрибут со значением, содержащим данную подстроку «ckbItem»:

$('input[name *= ckbItem]').prop('checked', true);

Он выберет все элементы, содержащие ckbItem в атрибуте name.

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

 $('.myCheckbox').attr('checked',true);

или же

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

Это правильный способ установки и снятия флажков с помощью jQuery, поскольку это кроссплатформенный стандарт, а будут разрешает репосты форм.

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

Делая это, вы используете стандарты JavaScript для установки и снятия флажков, поэтому любой браузер, который правильно реализует свойство "checked" элемента checkbox, будет безупречно запускать этот код. Это должен для всех основных браузеров, но я не могу протестировать его до Internet Explorer 9.

Проблема (jQuery 1.6):

Как только пользователь щелкает флажок, этот флажок перестает реагировать на изменения атрибута "checked".

Вот пример атрибута checkbox, который не выполняет работу после того, как кто-то установил флажок щелкнул (это происходит в Chrome).

Скрипка

Решение:

Используя свойство JavaScript "checked" в элементах ДОМ, мы можем решить проблему напрямую, вместо того, чтобы пытаться манипулировать 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;
});

Мы можем использовать elementObject с jQuery для проверки атрибута:

$(objectElement).attr('checked');

Мы можем использовать это для всех версий jQuery без каких-либо ошибок.

Обновление: JQuery 1.6+ имеет новый метод prop, который заменяет attr, например:

$(objectElement).prop('checked');

Вот код для отмеченного и снятого с помощью кнопки:

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;
    });
});

Я не мог заставить его работать, используя:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

И истина, и ложь установят флажок. Для меня сработало:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

Если предположить, что вопрос в том ...

Как поставить галочку ПО СТОИМОСТИ?

Помните, что в типичном наборе флажков все теги ввода имеют одно и то же имя, они отличаются атрибутом value: для каждого ввода набора нет идентификатора.

Ответ Сианя можно расширить с помощью более конкретный селектор, используя следующую строку кода:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

Если вы используете PhoneGap для разработки приложений, и у вас есть значение на кнопке, которое вы хотите отобразить мгновенно, не забудьте сделать это.

$('span.ui-[controlname]',$('[id]')).text("the value");

Я обнаружил, что без диапазона интерфейс не будет обновляться, что бы вы ни делали.

Я не могу найти решение. Я всегда буду использовать:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

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

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking

Вот способ сделать это без 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>

Если вы используете мобильный телефон и хотите, чтобы интерфейс обновлялся и показывал, что флажок снят, используйте следующее:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

Вот полный ответ используя 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.info(arr); // u can test it using this in google chrome
    });

Чтобы установить флажок с помощью 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);

$(".myCheckBox").prop("checked","checked");

Помните об утечках памяти в Internet Explorer до Интернет-технологии, так как В документации jQuery указано:

In Internet Explorer prior to version 9, using .prop() to set a DOM element property to anything other than a simple primitive value (number, string, or boolean) can cause memory leaks if the property is not removed (using .removeProp()) before the DOM element is removed from the document. To safely set values on DOM objects without memory leaks, use .data().

В jQuery

if ($("#checkboxId").is(':checked')){
    alert("Checked");
}

или же

if ($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

В JavaScript

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}

$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

Вот код и демонстрация того, как установить несколько флажков ...

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;
        }
    }
});

В целом:

$("#checkAll").click(function(){
    $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});

Обычный JavaScript очень прост и намного меньше накладных расходов:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

Пример здесь

Другое возможное решение:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

Чтобы проверить и снять отметку

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

Вы можете попробовать это:

$('input[name = "activity[task_state]"]').val("specify the value you want to check ")

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

$(".myCheckBox")[0].checked = true;

или же

$(".myCheckBox")[0].checked = false;

Еще короче было бы:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

Вот и a jsFiddle.

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

Когда вы установили флажок вроде:

$('.className').attr('checked', 'checked')

этого может быть недостаточно. Вы также должны вызвать функцию ниже;

$('.className').prop('checked', 'true')

Особенно, когда вы убрали атрибут checkbox checked.

Для 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();

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

HTML5

 <input id = "check_box" type = "checkbox" onclick = "handleOnClick()">

JavaScript.

  function handleOnClick(){

      if ($("#check_box").prop('checked'))
      {        
          console.info("current state: checked");
      }
      else
      {         
          console.info("current state: unchecked");
      }    
 }

Если вы используете Бутстрап (возможно, неосознанно) ...

$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')

http://www.bootstraptoggle.com/

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

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

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

3. Третий способ (для проверки условия, если флажок установлен или нет) - $('.myCheckbox').is(':checked')

Если вы используете .prop('checked', true|false) и не меняли флажок, вам нужно добавить trigger('click') следующим образом:

// Check
$('#checkboxF1').prop( "checked", true).trigger('click');


// Uncheck
$('#checkboxF1').prop( "checked", false).trigger('click');

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

Вы можете использовать: .prop (имя_свойства) - добавлена ​​версия: 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 также может быть простым и с меньшими накладными расходами:

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