Ўстаноўка "checked" для сцяжка з jQuery?

Я хацеў бы зрабіць нешта падобнае, каб адзначыць checkbox з дапамогай jQuery:

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

або

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

Ці існуе такая рэч?

3600
09 янв. зададзены tpower 09 студз. 2009-01-09 01:20 '09 у 01: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() у любой форме, якая ўтрымлівае яго - тонкае, але, верагодна, непажаданае змяненне паводзін.

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

Любая версія jQuery

Калі вы працуеце толькі з адным элементам, вы заўсёды можаце проста змяніць ўласцівасць HTMLInputElement .checked :

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

Перавага выкарыстання метадаў .prop() і .attr() замест гэтага складаецца ў тым, што яны будуць працаваць з усімі узгодненымі элементамі.

5405
09 янв. адказ дадзены Xian 09 студз. 2009-01-09 01:25 '09 у 01:25 2009-01-09 01:25

выкарыстанне:

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

І калі вы хочаце праверыць, ці ўсталяваны сцяжок ці не:

 $('.myCheckbox').is(':checked'); 
623
09 янв. адказ дадзены bchhun 09 студз. 2009-01-09 01:25 '09 у 01:25 2009-01-09 01:25

Гэта правільны спосаб праверкі і зняцця сцяжкоў з дапамогай 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

рашэнне:

Выкарыстоўваючы ўласцівасць "checked" JavaScript на элементах DOM , мы можам вырашыць праблему наўпрост, замест таго, каб спрабаваць маніпуляваць DOM, каб рабіць тое, што мы хочам гэта зрабіць.

Fiddle

Гэты убудова зменіць ўласцівасць checked любых элементаў, выбраных 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 янв. адказ дадзены Micah 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(); 

Апошні актывуе падзея click для гэтага сцяжка, а іншыя - не. Таму, калі ў вас ёсць карыстацкі код у падзеі onclick для сцяжка, які вы хочаце запусціць, выкарыстоўвайце апошні.

58
09 янв. адказ дадзены Chris Brandsma 09 студз. 2009-01-09 01:36 '09 у 01:36 2009-01-09 01:36

Каб ўсталяваць сцяжок, вы павінны выкарыстоўваць

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

або

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

і каб зняць сцяжок, вы заўсёды павінны ўсталяваць значэнне false:

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

Калі вы робіце

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

ён выдаляе атрыбут разам, і таму вы не зможаце reset стварыць форму.

BAD DEMO 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'); } }); 
56
23 марта '11 в 18:22 2011-03-23 18:22 адказ дадзены mcgrailm 23 сакавіка '11 у 18:22 2011-03-23 18:22

Мяркуючы, што пытанне ...

Як усталяваць сцяжок-сцяжок BY VALUE?

Памятаеце, што ў тыповым сьцяжкоў сцяжку усе тэгі ўводу маюць аднолькавае імя, яны адрозніваюцца атрыбутам value : для кожнага ўваходу набору няма ідэнтыфікатара.

Сіань-адказ можа быць пашыраны з дапамогай больш канкрэтнага селектара, выкарыстоўваючы наступны радок кода:

 $("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 чэрвеня '12 У 14:33 2012-06-24 14:33

Гэта выбірае элементы, якія маюць ўказаны атрыбут са значэннем, якія змяшчаюць дадзеную падрадок "ckbItem":

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

Ён абярэ ўсе элементы, якія змяшчаюць ckbItem ва ўласцівасці name.

37
20 сент. адказ дадзены Abou-Emish 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 адказ дадзены Ramon de Jesus 14 сакавіка '13 а 12.40 2013/03/14 00:40

Вось спосаб зрабіць гэта без jQuery

 <label>Click Me! <input id="cb" type="checkbox" /> </label> <label>Reflection: <input id="rcb" type="checkbox" /> </label> 
33
23 окт. адказ дадзены Aeoril 23 каст. 2012-10-23 03:41 '12 у 03:41 2012/10/23 03:41

Паспрабуйце наступнае:

 $('#checkboxid').get(0).checked = true; //For checking $('#checkboxid').get(0).checked = false; //For unchecking 
28
10 сент. адказ дадзены prashanth 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; }); }); 

Абнаўленне. Вось той жа блок кода, у якім выкарыстоўваецца новы метад падтрымкі 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+ мае новы метад prop, які замяняе attr, напрыклад:

 $(objectElement).prop('checked'); 
23
24 июня '11 в 11:27 2011-06-24 11:27 адказ дадзены Prasanth P 24 чэрвеня '11 у 11:27 2011-06-24 11:27

Калі вы выкарыстоўваеце PhoneGap распрацоўку прыкладанняў, і ў вас ёсць значэнне на кнопцы, якую вы хочаце адлюстраваць імгненна, не забудзьцеся зрабіць гэта

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

Я выявіў, што без дыяпазону інтэрфейс не будзе абнаўляцца незалежна ад таго, што вы робіце.

23
17 апр. адказ дадзены Clement Ho 17 крас. 2012-04-17 09:34 '12 у 09: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 авг. адказ дадзены tamilmani 16 жнів. 2013-08-16 09:17 '13 у 09:17 2013/08/16 09:17

Іншае магчымае рашэнне:

  var c = $("#checkboxid"); if (c.is(":checked")) { $('#checkboxid').prop('checked', false); } else { $('#checkboxid').prop('checked', true); } 
19
12 окт. адказ дадзены Muhammad Aamir Ali 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 крас. 2015-04-21 13:29 '15 у 13:29 2015/04/21 13:29

Памятаеце аб уцечках памяці ў Internet Explorer перад Internet Explorer 9 , як Стан дакументацыі jQuery :

У Internet Explorer да версіі 9 з дапамогай .prop () ўсталюйце DOM элемент для чаго-небудзь, акрамя простага прымітыўнага значэння (number, string або boolean) можа выклікаць уцечку памяці, калі ўласцівасць не выдаляецца (з выкарыстаннем .removeProp ()) перад выдаленнем элемента DOM з дакумента. Бяспечнае заданне значэнняў аб'ектаў DOM без памяці ўцечкі, выкарыстоўвайце .data ().

17
22 мая '13 в 10:25 2013-05-22 10:25 адказ дадзены naor 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 у 09: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 ў 05: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 у 04: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 сакавіка '15 у 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 студз. 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 }); values  // 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 }); chrome  // 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

Іншыя пытанні па пазнаках або Задайце пытанне