jQuery : 확인란이 선택되어 있지 않은지 테스트


110

이 문제를 파악하는 데 문제가 있습니다. 두 개의 체크 박스가 있습니다 (향후에는 더 추가 될 예정입니다).

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

기본적으로 if 문을 작성하고 그중 하나가 확인되고 다른 하나는 확인되지 않았는지 테스트하고 싶습니다. 다음을 수행하는 가장 쉬운 방법은 무엇입니까?

if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
     $("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
        // do something
}

3
둘 중 하나 가 선택 되어 있는지 확인 ||하지 않으 &&려면 사용하십시오 . 둘 다 선택 되었는지 확인합니다. &&
j08691

답변:


213

내가 사용하는 신뢰할 수있는 방법은 다음과 같습니다.

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    //do something
}

선택된 요소를 반복하려면 상위 요소를 사용하십시오.

$("#parentId").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
        //do something
    }
});

더 많은 정보:

이것은 모든 체크 박스에 체크 박스의 실제 상태를 저장하는 속성이 있기 때문에 잘 작동합니다. 원하는 경우 페이지를 검사하고 확인란을 선택 및 선택 취소하면 "선택됨"(있는 경우) 속성이 동일하게 유지됩니다. 이 속성 은 현재 상태가 아닌 체크 박스 의 초기 상태 만을 나타냅니다 . 현재 상태는 해당 확인란에 대한 dom 요소의 확인 된 속성에 저장됩니다.

HTML의 속성 및 속성 참조


2
음 ... 이것은 단지 설정합니다checked = true
Naftali 닐 일명

@Pablo-아래에서 내 대답을 확인하십시오.이 또한 신뢰할 수 있고 적절한 옵션입니다.
Aneesh Vijendran 2013 년

@PabloMescher 안녕하세요, 제발 도와 주시겠습니까? 실제로 여러 확인란 중 어떤 확인란이 선택되어 있는지 확인하고 싶습니다. 그리고 옆에있는 텍스트 상자를 활성화 / 비활성화합니다. 어떤 도움이라도 대단히 감사하겠습니다.
1lastBr3ath 2014-06-17

@ 1lastBr3ath 확실히, jQuery를 사용하는 경우 확인란과 관련된 텍스트 상자의 선택기를 찾고 두 번째 예제를 사용하면됩니다. if ($ (this) .prop ( 'checked')) {$ (this) .find ( "<textboxSelector>"). attr ( "disabled", true); }
Pablo Mescher 2014-06-17

1
@Stophface이 경우이 속성은 문자열이 아닌 계산 된 속성이므로 항상 부울이됩니다. 따라서 ==를 사용하여 벗어날 수 있습니다. 이것이 항상 그런 것은 아니므로하지만 항상 === 사용하는 것이 현명하다
파블로 Mescher

77
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
    // do something if the checkbox is NOT checked
}

31

jQuery .not()메서드 또는 :not()선택기를 사용할 수도 있습니다 .

if ($('#checkSurfaceEnvironment').not(':checked').length) {
    // do stuff for not selected
}

JSFiddle 예제


추가 참고 사항

:not() 선택기에 대한 jQuery API 문서에서 :

이 아니요 () 메소드는 에 복잡한 선택기 또는 변수를 밀어 것보다 더 읽기 선택 당신을 제공 끝날 하지 () : 선택 필터. 대부분의 경우 더 나은 선택입니다.


1
! $ ( "# checkSurfaceEnvironment"). is ( ": checked")는 부울을 반환합니다. 체크 박스를 체크하지 않으면 참입니다. $ ( '# checkSurfaceEnvironment'). not ( ': checked')는 DOM 요소의 배열을 반환합니다. 이것을 'if'로 테스트하면 선택자와 일치하는 항목이없고 배열이 비어 있어도 'true'가 반환됩니다. 대답이 정확할 수있는 유일한 방법은 i $ ( '# checkSurfaceEnvironment'). not ( ': checked'). length를 테스트 한 경우 0 또는 1을 반환하는 것입니다.
Thibault Witzig

22

다른 방법 :

여기에 작동 예제가 있고 여기에 코드가 있습니다. 또한 prop을 사용해야합니다.

$('input[type="checkbox"]').mouseenter(function() { 
    if ($(this).is(':checked')) {
        //$(this).prop('checked',false);
        alert("is checked");
    } else {
         //$(this).prop('checked',true);
        alert("not checked");
    }
});​

체크 된 속성을 토글하는 방법을 설명했습니다.


9
if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )

6

avijendr가 제안한 것과 같은보다 직접적인 구현을 찾고있었습니다.

나는 그의 / 그녀의 구문에 약간의 문제가 있었지만 작동하도록했습니다.

if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)

내 경우, 나는 클래스와 테이블을했다 user-forms, 그리고 문자열을 가지고 체크 박스의 경우 나는 확인 된 checkPrint자신의에서이 id체크되지 않은했다.


5

확인란이 선택되어 있는지 확인하는 가장 쉬운 방법 (jQuery 사용)은 다음과 같습니다.

'선택'한 경우 :

if ($(this).is(':checked')) {
// I'm checked let's do something
}

'확인'하지 않은 경우 :

if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}

4

여기에이 질문에 대한 스 니펫이 있습니다.

$(function(){
   $("#buttoncheck").click(function(){
        if($('[type="checkbox"]').is(":checked")){
            $('.checkboxStatus').html("Congratulations! "+$('[type="checkbox"]:checked').length+" checkbox checked");
        }else{
            $('.checkboxStatus').html("Sorry! Checkbox is not checked");
         }
         return false;
   })
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label>
      <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
      Checkbox</label>
    <br>
    <label>
      <input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">
      Checkbox</label>
    <br>
  </p>
  <p>
    <input type="reset" value="Reset">
    <input type="submit" id="buttoncheck" value="Check">
  </p>
  <p class="checkboxStatus"></p>
</form>


3

.attr()당신이 가지고 있는 것처럼 그것을하려면 , 그것이 체크되었는지 확인하기 위해 .attr("checked", "checked")그것은 될 것입니다..attr("checked") == undefined


1

모든 체크 박스가 div에서 확인되면 true를 반환합니다.

function all_checked (id_div){
 all_checked = true;

 $(id_div+' input[type="checkbox"]').each(function() { 
    all_checked = all_checked && $('this').prop('checked');
 }

 return all_checked;
}

1

간단하고 확인하기 쉬운 또는 확인되지 않은 상태

<input type="checkbox" id="ev-click" name="" value="" >

<script>
    $( "#ev-click" ).click(function() {
        if(this.checked){
            alert('checked');
        }
        if(!this.checked){
            alert('Unchecked');
        }
    });
</script>

1

이거 한번 해봐

if ($("#checkSurfaceEnvironment-1:checked").length>0) {
    //your code in case of NOT checked
}

위 코드에서 Id (#checkSurfaceEnvironment-1)로 요소를 선택한 다음 필터로 확인 된 상태를 (:checked)필터링합니다.

체크 된 요소 객체의 배열을 반환합니다. 배열에 객체가 있으면 조건이 충족됩니다.


귀하의 답변이 도움이 될 수 있지만 최소한 그 이유를 설명해야합니다. 그대로, 귀하의 답변은 저품질 게시물 검토 대기열 (내가보고있는 위치)에 전달되었습니다. 설명을 추가하려면 답변을 편집하는 것이 좋습니다.
크리스 Spittles

1

상태를 확인할 수있는 방법은 두 가지가 있습니다.

if ($("#checkSurfaceEnvironment-1").is(":checked")) {
    // Put your code here if checkbox is checked
}

또는 이것도 사용할 수 있습니다

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    // Put your code here if checkbox is checked
}

이 정보가 도움이 되었기를 바랍니다.


1

주어진 가장 간단한 방법은 다음과 같습니다.

 <script type="text/javascript">

        $(document).ready(function () {
            $("#chk_selall").change("click", function () {

                if (this.checked)
                {
                    //do something
                }
                if (!this.checked)
                {
                    //do something

                }

            });

        });

    </script>


0

이미 답변을 받았지만 여전히 이것이 좋은 방법입니다.

if ($("#checkbox").is(":checked")==false) {
    //Do stuff here like: $(".span").html("<span>Lorem</span>");
}

0
if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{ 
    alert('checkbox is checked');
}

4
이것은 저자의 질문에 답할 수 있지만 설명하는 단어 및 / 또는 문서에 대한 링크가 부족합니다. 원시 코드 조각은 주변에 문구가 없으면 그다지 도움이되지 않습니다. 좋은 답변을 작성하는 방법이 매우 도움 이 될 수도 있습니다. 답변을 수정하십시오- 검토에서
Nick

-4
$("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () {
        var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4");
    if (item.is(":checked")==true) {
        //execute your code here
    }

    else if (item.is(":not(:checked)"))
    {
        //execute your code here
    }

});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.