[javascript] jQuery에서 확인란이 선택되어 있는지 어떻게 확인합니까?

확인란의 checked속성 을 확인하고 jQuery를 사용하여 선택된 속성을 기반으로 작업을 수행해야합니다.

예를 들어 연령 확인란을 선택한 경우 연령을 입력하려면 텍스트 상자를 표시하고 그렇지 않으면 텍스트 상자를 숨겨야합니다.

그러나 다음 코드는 false기본적으로 반환 됩니다.

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<div id="txtAge" style="display:none">
Age is selected
</div>

스 니펫 확장

checked속성을 성공적으로 쿼리하려면 어떻게합니까 ?

답변

확인 된 속성을 성공적으로 쿼리하려면 어떻게합니까?

checked확인란 DOM 요소 의 속성은 요소의 checked상태를 제공합니다 .

기존 코드가 주어지면 다음과 같이 할 수 있습니다.

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

그러나 다음을 사용하여 훨씬 더 좋은 방법이 있습니다 toggle.

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

스 니펫 확장

답변

jQuery의 is () 함수를 사용하십시오 .

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

답변

jQuery 사용> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

새로운 속성 방법 사용하기 :

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

답변

jQuery 1.6 이상

$('#isAgeSelected').prop('checked')

jQuery 1.5 이하

$('#isAgeSelected').attr('checked')

모든 버전의 jQuery

// Assuming an event handler on a checkbox
if (this.checked)

모든 크레딧은 시안으로 갑니다 .

답변

나는 이것을 사용하고 있으며 이것은 절대적으로 잘 작동합니다.

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

참고 : 확인란을 선택하면 정의되지 않은 경우 true를 반환하므로 “TRUE”값을 확인하는 것이 좋습니다.

답변

사용하다:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

스 니펫 확장

답변

jQuery 1.6부터는 동작 jQuery.attr()이 변경되었으며 사용자는이를 사용하여 요소의 확인 된 상태를 검색하지 않는 것이 좋습니다. 대신 다음을 사용해야합니다 jQuery.prop().

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

다른 두 가지 가능성은 다음과 같습니다.

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")