it-swarm.com.ru

Установка "проверил" для флажка с JQuery?

Я хотел бы сделать что-то вроде этого, чтобы отметить checkbox, используя jQuery :

$(".myCheckBox").checked(true);

или же 

$(".myCheckBox").selected(true);

Существует ли такая вещь?

3783
tpower

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.checked:

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

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

5626
Xian

Использование:

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

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

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

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

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

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

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

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

Как только пользователь нажимает на флажок, этот флажок перестает отвечать на изменения атрибута «флажок».

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

Fiddle

Решение:

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

Fiddle

Этот плагин будет изменять свойство 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;
});
295
cwharris

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

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

или же

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

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

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

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

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

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

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

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

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

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

64
Chris Brandsma

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

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

или же

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

и чтобы снять флажок, вы всегда должны установить его в false:

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

Если вы делаете

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

он удаляет атрибут все вместе, и поэтому вы не сможете сбросить форму.

BAD DEMO 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');
    }
});
62
mcgrailm

Предполагая, что вопрос ...

Как проверить флажок-набор ПО ЗНАЧЕНИЮ?

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

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

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

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

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

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

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

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

44
Abou-Emish

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

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

35
Aeoril

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

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

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

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

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

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

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

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

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

$(objectElement).prop('checked');
26
Prasanth P

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

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

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

25
Clement Ho

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

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

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

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

Помните об утечках памяти в Internet Explorer до Internet Explorer 9 , так как в документации jQuery говорится :

В Internet Explorer до версии 9 используйте .prop () для установки DOM свойство элемента к чему-либо, кроме простого примитивного значения (число, строка или логическое значение) может вызвать утечки памяти, если свойство имеет значение не удаляется (используя .removeProp ()) до удаления элемента DOM из документа. Для безопасной установки значений на объектах DOM без памяти утечки, используйте .data ().

18
naor

Для 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');
18
logan

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

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

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

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
17
jj2422
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
16
mahmoh

Как сказал @ 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();
16
Ardalan Shahgholi

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

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

или же

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

Еще короче будет:

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

Вот также a jsFiddle .

15
frieder

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

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

Пример здесь

14
Alex W

Когда вы отметили флажок, как;

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

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

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

Особенно, когда вы удалили флажок отмеченный атрибут.

13
Serhat Koroglu

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

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

И true, и false установили бы флажок. Что сработало для меня:

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

Вот полный ответ Используя 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
    });
11
user1477929

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

В jQuery,

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

или же 

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

В JavaScript

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

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

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

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

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
5
anusha
$(".myCheckBox").prop("checked","checked");
4
mathew

if($('jquery_selector').is(":checked")){
  //somecode
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

4
David Arul

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

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

http://www.bootstraptoggle.com/

3
Kenmeister

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

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


//un-Check
$('#checkboxF1').prop( "checked", true).trigger('click');
1
Alex Montoya

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

  1. Первый метод - $('.myCheckbox').prop('checked', true);

  2. Второй метод - $('.myCheckbox').attr('checked', true);

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

1
Gaurang Sondagar

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

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

На угловой рамке

Пример 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')" />
0
Lyes CHIOUKH