Настройка "чек" за jQuery отметка?

Бих искал да направя нещо подобно, за да маркирам checkbox с jQuery :

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

или

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

Има ли такова нещо?

3600
09 янв. tpower е настроен на 09 януари 2009-01-09 01:20 '09 в 1:20 2009-01-09 01:20
@ 38 отговора
  • 1
  • 2

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() във всякаква форма, която я съдържа - една фина, но вероятно нежелана промяна в поведението.

За по-подробно описание на някои от непълните обсъждания на промените в обработването на атрибути / свойства при преместване от 1.5.x на 1.6, можете да намерите във версия 1.6 и атрибутите и свойствата на .prop() документацията .

Всяка версия на jQuery

Ако работите само с един елемент, винаги можете да промените собствеността на HTMLInputElement .

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

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

5405
09 янв. отговорът е даден Xian 09 януари. 2009-01-09 01:25 '09 в 1:25 ч. 2009-01-09 01:25

Употреба:

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

И ако искате да проверите дали полето е отметнато или не:

 $('.myCheckbox').is(':checked'); 
623
09 янв. Отговорът е даден bchhun Jan 09 2009-01-09 01:25 '09 в 1:25 ч. 2009-01-09 01:25

Това е правилният начин да проверите и махнете отметките в полетата с помощта на jQuery, тъй като това е стандарт за различни платформи и ви позволява да изпращате отчети.

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

В същото време използвате JavaScript стандартите, за да проверявате и премахвате отметките, така че всеки браузър, който правилно проверява провереното свойство на елемента с отметка, ще работи безпроблемно с този код. Трябва да са всички основни браузъри, но не мога да тествам Internet Explorer 9 преди.

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

Веднага след като потребителят кликне върху квадратчето за отметка, квадратчето за отметка престава да отговаря на промените в атрибута "чек".

Ето пример за атрибута на квадратчето, което задачата не успя да изпълни, след като някой е натиснал това квадратче (това се случва в Chrome).

цигулка

решение:

Използвайки "проверените" JavaScript свойства на 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; }); 
284
06 мая '11 в 22:31 2011-05-06 22:31 Отговорът е даден от cwharris Май 06 '11 в 22:31 2011-05-06 22:31

Можете да го направите

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

или

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

Ако имате персонализиран код в събитието onclick за квадратчето, което искате да изпълните, използвайте вместо това:

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

Можете да махнете отметката, като премахнете напълно атрибута:

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

Можете да проверите всички квадратчета за отметка, както следва:

 $(".myCheckbox").each(function(){ $("#mycheckbox").click() }); 
130
09 янв. отговори на Михей януари 09 2009-01-09 01:24 '09 в 1:24 2009-01-09 01:24

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

67
20 авг. отговорът е даден livefree75 20 август. 2010-08-20 21:19 '10 в 21:19 2010-08-20 21:19
 $("#mycheckbox")[0].checked = true; $("#mycheckbox").attr('checked', true); $("#mycheckbox").click(); 

Последният активира събитие за щракване за това квадратче за отметка, но други не. Следователно, ако имате потребителски код в събитието onclick за квадратчето, което искате да изпълните, използвайте последния.

58
09 янв. Отговорът е даден от Крис Брандсма 09 януари 2009-01-09 01:36 '09 в 1:36 2009-01-09 01:36

За да поставите отметка в квадратчето, трябва да го използвате

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

или

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

и за да премахнете отметката от квадратчето, винаги трябва да зададете стойността на false:

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

Ако го направите

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

премахва атрибута заедно и следователно не можете да възстановите формата.

BAD DEMO jQuery 1.6 . Мисля, че е счупен. За 1.6, аз ще направя нов пост.

НОВА РАБОТА DEMO jQuery 1.5.2 работи в Chrome.

И двете демонстрации използват

 $('#tc').click(function() { if ( $('#myCheckbox').attr('checked')) { $('#myCheckbox').attr('checked', false); } else { $('#myCheckbox').attr('checked', 'checked'); } }); 
56
23 марта '11 в 18:22 2011-03-23 18:22 отговорът е даден от mcgrailm 23 март '11 в 18:22 2011-03-23 ​​18:22

Ако зададем въпроса ...

Как да поставим отметката до VALUE?

Не забравяйте, че в типично квадратче за отметка всички входни маркери имат едно и също име, те се различават в атрибута value : няма идентификатор за всеки вход на набора.

Отговорът на Xi'an може да бъде разширен с по-специфичен селектор, като се използва следния ред код:

 $("input.myclass[name='myname'][value='the_value']").prop("checked", true); 
42
09 марта '12 в 15:28 2012-03-09 15:28 отговорът е даден от Peter Krauss март 09 '12 в 15:28 2012-03-09 15:28

Липсва ми решението. Винаги ще използвам:

 if ($('#myCheckBox:checked').val() !== undefined) { //Checked } else { //Not checked } 
42
24 июня '12 в 14:33 2012-06-24 14:33 отговорът е даден от Overbeeke на 24 юни 2008 г. в 14:33 ч. 2012-06-24 14:33

Той избира елементи, които имат зададен атрибут със стойност, съдържаща дадения подстрока "ckbItem":

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

Той ще избере всички елементи, съдържащи ckbItem в свойството име.

37
20 сент. отговорът е даден от Абу-Емиш 20 сеп . 2010-09-20 14:43 '10 в 14:43 2010-09-20 14:43

За да зададете флаг с помощта на 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); 
36
14 марта '13 в 12:40 2013-03-14 12:40 Отговорът е даден от Рамон де Исус на 14 март '13 в 12:40 2013-03-14 12:40

Ето един начин да направите това без jQuery

 <label>Click Me! <input id="cb" type="checkbox" /> </label> <label>Reflection: <input id="rcb" type="checkbox" /> </label> 
33
23 окт. Отговор Aeoril Oct 23. 2012-10-23 03:41 '12 в 3:41 am 2012-10-23 03:41

Опитайте следното:

 $('#checkboxid').get(0).checked = true; //For checking $('#checkboxid').get(0).checked = false; //For unchecking 
28
10 сент. Отговорът е даден прашант 10 септември. 2012-09-10 13:26 '12 в 13:26 ч. 2012-09-10 13:26

Ето кода за маркираните и непроверени бутони:

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

Update. Тук е същият блок код, който използва новия метод за поддръжка на 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; }); }); 
25
25 окт. отговор, даден от starjahid 25 октомври 2011-10-25 11:51 '11 в 11:51 2011-10-25 11:51

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

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

Можем да използваме това за всички версии на jQuery без грешки.

Актуализация: jQuery 1.6+ има нов метод, който замества attr, например:

 $(objectElement).prop('checked'); 
23
24 июня '11 в 11:27 2011-06-24 11:27 отговорът е даден от Prasanth P на 24 юни 2009 г. в 11:27 2011-06-24 11:27

Ако използвате разработката на приложението PhoneGap и имате стойност за бутон, който искате да се покаже незабавно, не забравяйте да го направите.

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

Открих, че без диапазон, интерфейсът няма да се актуализира без значение какво правите.

23
17 апр. Отговорът е даден на Климент Хо на 17 април. 2012-04-17 09:34 '12 в 9:34 ч. 2012-04-17 09:34

Ето кода и демонстрация на това как да проверите няколко квадратчета ...

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; } } }); 
22
16 авг. Отговорът е даден на тамилмани 16 август. 2013-08-16 09:17 '13 в 9:17 2013-08-16 09:17

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

  var c = $("#checkboxid"); if (c.is(":checked")) { $('#checkboxid').prop('checked', false); } else { $('#checkboxid').prop('checked', true); } 
19
12 окт. отговор, даден от Мохамед Амир Али на 12 октомври. 2013-10-12 11:23 '13 в 11:23 2013-10-12 11:23

За 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'); 
17
21 апр. отговорът е даден logan 21 Apr 2015-04-21 13:29 '15 в 13:29 2015-04-21 13:29

Не забравяйте за изтичане на паметта в Internet Explorer преди Internet Explorer 9 , като състояние на документацията jQuery :

В Internet Explorer до версия 9, използвайки .prop () задайте DOM елемент за нещо различно от обикновена примитивна стойност (номер, низ или булев) може да доведе до изтичане на памет, ако собствеността не е премахната (използвайки .removeProp ()), преди да изтриете DOM елемент от документа. Безопасно задаване на стойности за DOM обекти без изтичане на памет, използвайте .data ().

17
22 мая '13 в 10:25 2013-05-22 10:25 отговорът е даден на 22 май '13 в 10:25 2013-05-22 10:25

Ако използвате мобилен телефон и искате интерфейсът да бъде актуализиран, а квадратчето за отметка да се показва като нерегистриран, използвайте следното:

 $("#checkbox1").prop('checked', false).checkboxradio("refresh"); 
17
11 янв. Отговорът е даден от Matt Peacock 11 януари. 2013-01-11 16:05 '13 в 16:05 2013-01-11 16:05

За да проверите и премахнете отметката

 $('.myCheckbox').prop('checked', true); $('.myCheckbox').prop('checked', false); 
16
14 нояб. отговорът е даден jj2422 14 ноември. 2013-11-14 09:34 '13 в 9:34 2013-11-14 09:34
 $('controlCheckBox').click(function(){ var temp = $(this).prop('checked'); $('controlledCheckBoxes').prop('checked', temp); }); 
15
16 июля '13 в 5:10 2013-07-16 05:10 отговорът е даден mahmoh 16 юли '13 в 5:10 ч. 2013-07-16 05:10

Това вероятно е най-краткото и най-просто решение:

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

или

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

Още по-кратък ще бъде:

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

Тук е jsFiddle .

14
27 мая '14 в 18:11 2014-05-27 18:11 отговорът е даден от frieder на 27 май 14 в 18:11 2014-05-27 18:11

Редовният JavaScript е много прост и много по-малко режийни:

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

Пример тук

13
18 сент. Отговорът е даден Alex W 18 сеп. 2013-09-18 04:14 '13 в 4:14 2013-09-18 04:14

Когато поставите отметка в квадратчето, например:

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

това може да не е достатъчно. Трябва също да извикате функцията по-долу;

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

Особено когато сте премахнали квадратчето за атрибут за проверка.

12
05 марта '15 в 16:10 2015-03-05 16:10 отговорът е даден от Serhat Koroglu 05 март в 16:10 2015-03-05 16:10

Не успях да работя с:

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

И двете опции: true и false задават флаг. Какво работи за мен:

 $("#cb").prop('checked', 'true'); // For checking $("#cb").prop('checked', ''); // For unchecking 
11
05 янв. отговорът е даден fredcrs 05 jan. 2012-01-05 16:26 '12 в 16:26 ч. 2012-01-05 16:26

Както @ 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(); 
11
23 сент. отговорът е даден от Ardalan Shahgholi 23 септември 2016-09-23 21:43 '16 в 21:43 2016-09-23 21:43

В JQuery

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

или

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

В javascript

 if (document.getElementById("checkboxID").checked){ alert("Checked"); } 
10
10 июня '13 в 16:17 2013-06-10 16:17 отговорът е даден от ijarlax 10 юни '13 в 16:17 2013-06-10 16:17

Ето пълния отговор, използвайки 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 }); 
10
27 февр. отговор, даден от user1477929 на 27 февруари 2013-02-27 18:49 '13 в 18:49 2013-02-27 18:49
  • 1
  • 2