jQuery에서 체크 박스가 선택되었는지 확인하는 방법은 무엇입니까?



Answers

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

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

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

예를 들어 연령 체크 박스가 선택되어 있으면 나이를 입력하려면 텍스트 상자를 표시하고 그렇지 않으면 텍스트 상자를 숨길 필요가 있습니다.

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

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

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




$(selector).attr('checked') !== undefined

입력이 선택되면 true 반환하고 true 않으면 false 반환합니다.




나는 그것이 단순한 것이라고 생각한다.

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});



이것은 나를 위해 일했다 :

$get("isAgeSelected ").checked == true

여기서 isAgeSelected 는 컨트롤의 ID입니다.

또한, @ karim79의 answer 은 잘 작동합니다. 나는 그것을 시험 할 때 내가 무엇을 놓쳤는 지 확신하지 못한다.

참고,이 대답은 jQuery가 아니라 Microsoft Ajax를 사용합니다.




나는 이것을 사용하고있다 :

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();



체크 박스가 선택되었는지 확인하는 방법에는 여러 가지가 있습니다.

jQuery를 사용하여 확인하는 방법

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

예제 또는 문서 확인 :




이것은 같은 일을하는 몇 가지 다른 방법입니다.

$(document).ready(function (){

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

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>




checkbox 속성에 Click 이벤트 핸들러를 사용하는 것은 신뢰할 수 없습니다. 이는 checked 속성이 이벤트 핸들러 자체의 실행 중에 변경 될 수 있기 때문입니다!

이상적으로는 체크 상자의 값이 변경 될 때마다 (이렇게 수행되는 방법 과 관계없이) 시작되는 것과 같은 change 이벤트 핸들러에 코드를 삽입 하는 것이 좋습니다.

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});



최고 대답은 나를 위해 그것을하지 않았다. 이것은했다 :

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

기본적으로 요소 # li_13을 클릭하면 요소 #가 동의하는지 (확인란) 확인란이 .attr('checked') 함수를 사용하여 검사되는지 .attr('checked') 합니다. 그렇다면 #saveForm 요소가 사라지고 fadeOut이 아닌 경우 saveForm 요소가 사라집니다.




이 예제는 버튼 용입니다.

다음을 시도하십시오.

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});



이렇게하는 내 방식은 다음과 같습니다.

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}



당신이 사용할 수있는:

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

둘 다 작동해야합니다.




jQuery 1.6 이상

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

jQuery 1.5 이하

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

모든 버전의 jQuery

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

모든 신용은 Xian 간다.




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



나는 네가 이렇게 할 수 있다고 믿는다.

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}



Links