jQuery를 사용하여 확인란에 대해 "선택됨" 설정

질문자 :tpower

jQuery를 사용하여 checkbox 다음과 같이 하고 싶습니다.

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

또는

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

그런 것이 존재합니까?

답변자 : Xian

현대 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);

이것은버전 1.6 이전 jQuery의 단위 테스트에서 사용된 접근 방식 이며 $('.myCheckbox').removeAttr('checked'); 후자는 상자가 처음에 선택 .reset() 호출의 동작을 변경합니다. 미묘하지만 아마도 환영받지 못하는 동작 변경입니다.

더 자세한 내용은 1.5.x에서 1.6으로의 전환에서 checked 속성/속성의 처리에 대한 일부 불완전한 논의가 버전 1.6 릴리스 노트 와 .prop() 의 속성 대 속성 섹션에서 찾을 수 있습니다. 문서 .

답변자 : bchhun

사용하다:

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

확인란이 선택되어 있는지 확인하려면 다음을 수행하십시오.

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

답변자 : cwharris

이것은 크로스 플랫폼 표준이며 양식 재게시 를 허용하기 때문에 jQuery로 체크박스를 선택 및 선택 해제하는 올바른 방법입니다.

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

이렇게 하면 확인란을 선택하고 선택 취소하는 JavaScript 표준을 사용하므로 확인란 요소의 "checked" 속성을 올바르게 구현하는 모든 브라우저에서 이 코드를 완벽하게 실행할 수 있습니다. 이것은 모든 주요 브라우저여야 하지만 Internet Explorer 9 이전 버전에서는 테스트할 수 없습니다.

문제 (제이쿼리 1.6):

사용자가 확인란을 클릭하면 해당 확인란은 "checked" 속성 변경에 응답하지 않습니다.

다음은 누군가가 확인란을 클릭 한 후 작업을 수행하지 못하는 확인란 속성의 예입니다(Chrome에서 발생).

깡깡이

해결책:

DOM 요소에 JavaScript의 "checked" 속성을 사용하면 원하는 작업을 수행하도록 DOM을 조작하는 대신 문제를 직접 해결할 수 있습니다.

깡깡이

이 플러그인은 jQuery가 선택한 모든 요소의 checked 속성을 변경하고 모든 상황에서 성공적으로 체크박스를 선택 및 선택 해제합니다. 따라서 이것이 과도한 솔루션처럼 보일 수 있지만 사이트의 사용자 경험을 개선하고 사용자 불만을 방지하는 데 도움이 됩니다.

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

답변자 : Micah

넌 할 수있어

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

또는

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

실행하려는 확인란의 onclick 이벤트에 사용자 정의 코드가 있는 경우 다음 코드를 대신 사용하십시오.

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

속성을 완전히 제거하여 선택을 취소할 수 있습니다.

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

다음과 같이 모든 확인란을 선택할 수 있습니다.

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

답변자 : livefree75

새 메서드를 사용하여 $.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()와 같은 고유한 이름을 지정할 수 있습니다.

답변자 : Chris Brandsma

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

마지막 것은 체크박스에 대한 클릭 이벤트를 발생시키고 나머지는 그렇지 않습니다. 따라서 실행하려는 확인란의 onclick 이벤트에 사용자 정의 코드가 있는 경우 마지막 코드를 사용하십시오.

답변자 : mcgrailm

체크박스를 선택하려면 다음을 사용해야 합니다.

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

답변자 : Abou-Emish

이렇게 하면 지정된 하위 문자열 "ckbItem"을 포함하는 값으로 지정된 속성이 있는 요소가 선택됩니다.

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

name 속성에 ckbItem이 포함된 모든 요소를 선택합니다.

답변자 : Community Wiki

질문이라고 가정하면...

BY VALUE 로 설정된 체크박스를 어떻게 확인합니까?

일반적인 체크박스 세트에서 모든 입력 태그는 동일한 이름을 가지며 value 따라 다릅니다 . 세트의 각 입력에 대한 ID가 없습니다.

다음 코드 줄을 사용하여 보다 구체적인 선택기로 Xian의 답변을 확장할 수 있습니다.

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

답변자 : Overbeeke

솔루션이 누락되었습니다. 나는 항상 사용할 것입니다:

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

답변자 : Ramon de Jesus

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

답변자 : Xitalogy

다음은 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>

답변자 : starjahid

다음은 버튼으로 선택 및 선택 취소에 대한 코드입니다.

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

업데이트: 다음은 attr을 대체하는 최신 Jquery 1.6+ prop 메서드를 사용하는 동일한 코드 블록입니다.

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

답변자 : prashanth

이 시도:

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

답변자 : Prasanth P

속성을 확인하기 위해 jQuery와 함께 elementObject 를 사용할 수 있습니다.

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

오류 없이 모든 jQuery 버전에 사용할 수 있습니다.

업데이트: Jquery 1.6+에는 attr을 대체하는 새로운 prop 메소드가 있습니다. 예:

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

답변자 : Clement Ho

PhoneGap 을 사용하여 애플리케이션 개발을 하고 있고 버튼에 즉시 표시하고 싶은 값이 있는 경우 이 작업을 수행하는 것을 잊지 마십시오.

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

스팬이 없으면 무엇을 하든지 인터페이스가 업데이트되지 않는다는 것을 알았습니다.

답변자 : tamilmani

다음은 여러 확인란을 선택하는 방법에 대한 코드와 데모입니다...

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

답변자 : Muhammad Aamir Ali

또 다른 가능한 솔루션:

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

답변자 : Ardalan Shahgholi

@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의 새 버전에서는 다음과 같이 사용해야 합니다.

제이쿼리 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();

답변자 : Matt Peacock

모바일을 사용 중이고 인터페이스가 업데이트되고 확인란이 선택되지 않은 상태로 표시되도록 하려면 다음을 사용하세요.

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

답변자 : logan

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

답변자 : jj2422

확인 및 선택 해제하려면

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

답변자 : naor

jQuery 문서에 다음 과 같이 명시되어 있으므로 Internet Explorer 9 이전의 Internet Explorer에서 메모리 누수에 주의하십시오.

Internet Explorer 버전 9 이전에서는 .prop()을 사용하여 DOM 요소 속성을 단순 기본 값(숫자, 문자열 또는 부울) 이외의 값으로 설정하면 속성이 제거되지 않은 경우(.removeProp( 사용) 메모리 누수가 발생할 수 있습니다. )) DOM 요소가 문서에서 제거되기 전에. 메모리 누수 없이 DOM 객체에 값을 안전하게 설정하려면 .data()를 사용하십시오.

답변자 : mahmoh

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

답변자 : Friedrich

이것은 아마도 가장 짧고 쉬운 솔루션일 것입니다.

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

또는

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

---

더 짧은 것은 다음과 같습니다.

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

---

여기 에 jsFiddle 도 있습니다.

답변자 : Alex W

일반 JavaScript는 매우 간단하고 오버헤드가 훨씬 적습니다.

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

여기 예

답변자 : fredcrs

다음을 사용하여 작동하지 못했습니다.

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

true와 false 모두 확인란을 선택합니다. 나를 위해 일한 것은 다음과 같습니다.

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

답변자 : Serhat Koroglu

다음과 같은 확인란을 선택하면;

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

충분하지 않을 수 있습니다. 또한 아래 함수를 호출해야 합니다.

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

특히 확인란 checked 속성을 제거한 경우.

답변자 : user1477929

다음은 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 });

답변자 : DmitryBoyko

ASP.NET MVC 를 사용하는 경우 많은 확인란을 생성하고 나중에 JavaScript를 사용하여 모두 선택/선택 취소 해야 하는 경우 다음을 수행할 수 있습니다.

HTML

 @foreach (var item in Model) { @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected) }

자바스크립트

 function SelectAll() { $('input[id^="ProductId_"]').each(function () { $(this).prop('checked', true); }); } function UnselectAll() { $('input[id^="ProductId_"]').each(function () { $(this).prop('checked', false); }); }

출처 : Here

출처 : http:www.stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery">