jQuery로 확인란이 선택되어 있는지 확인하십시오.

질문자 :Jake

확인란 배열의 ID를 사용하여 확인란 배열의 확인란이 선택되어 있는지 어떻게 확인할 수 있습니까?

다음 코드를 사용하고 있지만 ID에 관계없이 항상 체크된 체크박스의 개수를 반환합니다.

 function isCheckedById(id) { alert(id); var checked = $("input[@id=" + id + "]:checked").length; alert(checked); if (checked == 0) { return false; } else { return true; } }

$('#' + id).is(":checked")

확인란이 선택되어 있으면 가져옵니다.

이름이 같은 체크박스 배열의 경우 다음을 통해 체크박스 목록을 얻을 수 있습니다.

 var $boxes = $('input[name=thename]:checked');

그런 다음 루프를 반복하고 확인된 항목을 확인하려면 다음을 수행하세요.

 $boxes.each(function(){ // Do stuff here with this });

확인된 수를 찾으려면 다음을 수행하십시오.

 $boxes.length;

John Boker

ID는 문서에서 고유해야 합니다. 즉, 다음과 같이 해서는 안 됩니다 .

 <input type="checkbox" name="chk[]" id="chk[]" value="Apples" /> <input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

대신 ID를 삭제한 다음 이름 또는 포함하는 요소별로 선택합니다.

 <fieldset id="checkArray"> <input type="checkbox" name="chk[]" value="Apples" /> <input type="checkbox" name="chk[]" value="Bananas" /> </fieldset>

그리고 이제 jQuery:

 var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0; //there should be no space between identifier and selector // or, without the container: var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;

nickf

$('#checkbox').is(':checked');

위의 코드는 체크박스가 체크되어 있으면 true를, 체크되어 있지 않으면 false를 반환합니다.

Prasanna Rotti

다음 방법이 모두 유용합니다.

 $('#checkbox').is(":checked") $('#checkbox').prop('checked') $('#checkbox')[0].checked $('#checkbox').get(0).checked

DOMelement 또는 인라인 "this.checked"를 피하는 것이 좋습니다. 대신 jQuery on method가 이벤트 리스너를 사용해야 합니다.

justnajm

체크박스 선택 여부를 확인하는 jQuery 코드:

 if($('input[name="checkBoxName"]').is(':checked')) { // checked }else { // unchecked }

또는:

 if($('input[name="checkBoxName"]:checked')) { // checked }else{ // unchecked }

Kundan roy

checked 속성에 대해 기억해야 할 가장 중요한 개념은 checked 속성과 일치하지 않는다는 것입니다. 속성은 실제로 defaultChecked 속성에 해당하며 확인란의 초기 값을 설정하는 데만 사용해야 합니다. checked 속성 값은 체크박스 상태에 따라 변경되지 않지만 checked 속성은 변경됩니다. 따라서 확인란이 선택되어 있는지 확인하는 브라우저 간 호환 방법은 속성을 사용하는 것입니다.

아래의 모든 방법이 가능합니다.

 elem.checked $(elem).prop("checked") $(elem).is(":checked")

Techie

이 코드를 사용할 수 있습니다.

 if($("#checkboxId").is(':checked')){ // Code in the case checkbox is checked. } else { // Code in the case checkbox is NOT checked. }

Mohammed Shaheen MK

이것은 내가 자주 사용하는 아이디어이기도 합니다.

 var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

체크하면 1을 반환합니다. 그렇지 않으면 0을 반환합니다.

Rtronic

jQuery 문서에 따르면 확인란이 선택되어 있는지 확인하는 다음과 같은 방법이 있습니다. 예를 들어 확인란을 고려해 보겠습니다(모든 예제로 작업 jsfiddle 확인)

 <input type="checkbox" name="mycheckbox" id="mycheckbox" /> <br><br> <input type="button" id="test-with-checked" value="Test with checked" /> <input type="button" id="test-with-is" value="Test with is" /> <input type="button" id="test-with-prop" value="Test with prop" />

예 1 - 체크된 상태

 $("#test-with-checked").on("click", function(){ if(mycheckbox.checked) { alert("Checkbox is checked."); } else { alert("Checkbox is unchecked."); } });

예 2 - jQuery의 경우 참고 - :checked

 var check; $("#test-with-is").on("click", function(){ check = $("#mycheckbox").is(":checked"); if(check) { alert("Checkbox is checked."); } else { alert("Checkbox is unchecked."); } });

예 3 - jQuery 소품 사용

 var check; $("#test-with-prop").on("click", function(){ check = $("#mycheckbox").prop("checked"); if(check) { alert("Checkbox is checked."); } else { alert("Checkbox is unchecked."); } });

작업 jsfiddle 확인

Subodh Ghulaxe

당신은 이것을 시도할 수 있습니다:

 <script> function checkAllCheckBox(value) { if($('#select_all_').is(':checked')){ $(".check_").attr ( "checked" ,"checked" ); } else { $(".check_").removeAttr('checked'); } } </script> <input type="checkbox" name="chkbox" id="select_all_" value="1" /> <input type="checkbox" name="chkbox" class="check_" value="Apples" /> <input type="checkbox" name="chkbox" class="check_" value="Bananas" /> <input type="checkbox" name="chkbox" class="check_" value="Apples" /> <input type="checkbox" name="chkbox" class="check_" value="Bananas" />

Vishnu Sharma

나는 OP가 jquery를 원한다는 것을 알고 있지만 제 경우에는 순수한 JS가 답이었으므로 나와 같은 사람이 여기에 있고 jquery가 없거나 사용하고 싶지 않다면 - 여기에 JS 답변이 있습니다.

 document.getElementById("myCheck").checked

ID가 myCheck인 입력이 확인되면 true를 반환하고 확인하지 않으면 false를 반환합니다.

간단합니다.

Combine

jquery에서 다음 권장 코드 중 하나를 사용할 수 있습니다.

 if ( elem.checked ) {}; if ( $( elem ).prop( "checked" ) ) {}; if ( $( elem ).is( ":checked" ) ) {};

endur

다음과 같이 간단하게 할 수 있습니다.

일하는 바이올린

HTML

 <input id="checkbox" type="checkbox" />

제이쿼리

 $(document).ready(function () { var ckbox = $('#checkbox'); $('input').on('click',function () { if (ckbox.is(':checked')) { alert('You have Checked it'); } else { alert('You Un-Checked it'); } }); });

또는 더 간단합니다.

 $("#checkbox").attr("checked") ? alert("Checked") : alert("Unchecked");

checkbox 을 선택하면 true 를 반환하고 그렇지 않으면 undefined

Aamir Shahzad

확인란을 확인하고 설정하는 간단한 데모입니다.

jsfiddle !

 $('.attr-value-name').click(function() { if($(this).parent().find('input[type="checkbox"]').is(':checked')) { $(this).parent().find('input[type="checkbox"]').prop('checked', false); } else { $(this).parent().find('input[type="checkbox"]').prop('checked', true); } });

An Illusion

내 예에서 상황은 대화 상자를 닫기 전에 확인란을 확인한 다음 대화 상자였습니다. 위의 사항 이 없으며 jQuery에서 확인란이 선택되어 있는지 확인하는 방법은 무엇입니까? 확인란이 선택되어 있으면 jQuery도 작동하지 않는 것으로 보입니다.

결국

 <input class="cb" id="rd" type="checkbox"> <input class="cb" id="fd" type="checkbox"> var fd=$('.cb#fd').is(':checked'); var rd= $('.cb#rd').is(':checked');

이것은 클래스를 호출한 다음 ID를 호출하도록 작동했습니다. 아이디 뿐만 아니라 이 페이지에 중첩된 DOM 요소가 문제를 일으키기 때문일 수 있습니다. 해결 방법은 위에 있었습니다.

V H

ID가 있는 확인란의 경우

 <input id="id_input_checkbox13" type="checkbox"></input>

당신은 단순히 할 수 있습니다

 $("#id_input_checkbox13").prop('checked')

위 구문의 반환 값으로 true 또는 false 를 얻습니다. if 절에서 일반 부울 표현식으로 사용할 수 있습니다.

Aniket Thakur

이와 같은 것이 도움이 될 수 있습니다.

 togglecheckBoxs = function( objCheckBox ) { var boolAllChecked = true; if( false == objCheckBox.checked ) { $('#checkAll').prop( 'checked',false ); } else { $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) { if( false == chkbox.checked ) { $('#checkAll').prop( 'checked',false ); boolAllChecked = false; } }); if( true == boolAllChecked ) { $('#checkAll').prop( 'checked',true ); } } }

Abdul Hamid

실제로 jsperf.com 에 따르면 DOM 작업이 가장 빠르며 $().prop() 다음에 $().is()가 옵니다!!

구문은 다음과 같습니다.

 var checkbox = $('#'+id); /* OR var checkbox = $("input[name=checkbox1]"); whichever is best */ /* The DOM way - The fastest */ if(checkbox[0].checked == true) alert('Checkbox is checked!!'); /* Using jQuery .prop() - The second fastest */ if(checkbox.prop('checked') == true) alert('Checkbox is checked!!'); /* Using jQuery .is() - The slowest in the lot */ if(checkbox.is(':checked') == true) alert('Checkbox is checked!!');

나는 개인적으로 .prop() 선호합니다. .is() 와 달리 값을 설정하는 데 사용할 수도 있습니다.

BlackPanther

토글 체크박스 선택

 $("#checkall").click(function(){ $("input:checkbox").prop( 'checked',$(this).is(":checked") ); })

sourceboy

$(document).on('click','#checkBoxId',function(){ var isChecked = $(this).is(':checked'); console.log(isChecked); });

위의 이 코드는 부트스트랩 모달에서도 작동합니다. isChecked는 true 또는 false입니다.

infomasud

이 코드를 사용하면 다른 확인란 그룹이나 여러 확인란에서 하나 이상의 확인란이 선택되어 있는지 확인할 수 있습니다. 이를 사용하면 ID 또는 동적 ID를 제거할 필요가 없습니다. 이 코드는 동일한 ID로 작동합니다.

참조 링크

 <label class="control-label col-sm-4">Check Box 2</label> <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br /> <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br /> <label class="control-label col-sm-4">Check Box 3</label> <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br /> <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br /> <script> function checkFormData() { if (!$('input[name=checkbox2]:checked').length > 0) { document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null"; return false; } if (!$('input[name=checkbox3]:checked').length > 0) { document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null"; return false; } alert("Success"); return true; } </script>

Parth Patel

2019년 중반이고 jQuery는 때때로 VueJS, React 등과 같은 것에 뒤쳐지기 때문에 순수한 바닐라 자바스크립트 온로드 리스너 옵션은 다음과 같습니다.

 <script> // Replace 'admincheckbox' both variable and ID with whatever suits. window.onload = function() { const admincheckbox = document.getElementById("admincheckbox"); admincheckbox.addEventListener('click', function() { if(admincheckbox.checked){ alert('Checked'); } else { alert('Unchecked'); } }); } </script>

Grant

귀하의 질문은 명확하지 않습니다. 입력 시 "체크박스 배열 ID"를 제공하고 true/false 를 얻으려고 합니다. 이렇게 하면 어떤 체크박스가 선택되었는지 알 수 없습니다(함수 이름에서 알 수 있듯이). isCheckedById 의 본문에 대한 내 제안이 있습니다. 이 제안은 입력 시 체크박스 id 취하고 출력 시 true/false 반환합니다(매우 간단하지만 ID가 키워드가 아니어야 함).

 this[id].checked 

 function isCheckedById(id) { return this[id].checked; } // TEST function check() { console.clear() console.log('1',isCheckedById("myCheckbox1")); console.log('2',isCheckedById("myCheckbox2")); console.log('3',isCheckedById("myCheckbox3")); }

 <label><input id="myCheckbox1" type="checkbox">check 1</label> <label><input id="myCheckbox2" type="checkbox">check 2</label> <label><input id="myCheckbox3" type="checkbox">check 3</label> <!-- label around inputs makes text clickable --> <br> <button onclick="check()">show checked</button>

Kamil Kiełczewski

아래 코드 사용

 <script> $(document).ready(function () { $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()"); } function ShowMailSection() { if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){ $("[id$='SecEmail']").removeClass("Hide"); } </script>

Code_Worm

출처 : http:www.stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery