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

이것은 나를 위해 일했다 :

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

isAgeSelected컨트롤의 ID는 어디에 있습니까 ?

또한 @ karim79의 답변 이 잘 작동합니다. 테스트 할 때 놓친 부분이 확실하지 않습니다.

참고, 이것은 jQuery가 아닌 Microsoft Ajax를 사용하는 답변입니다.

업데이트 된 버전의 jquery를 사용하는 경우 .prop문제를 해결 하는 방법을 찾아야합니다 .

$('#isAgeSelected').prop('checked')true선택하고 false선택하지 않으면 반환 됩니다 . 나는 그것을 확인 하고이 문제를 더 일찍 보았습니다. $('#isAgeSelected').attr('checked')및 $('#isAgeSelected').is('checked')반환 undefined상황에 대한 가치있는 대답하지 않은. 아래에 주어진대로하십시오.

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

그것이 도움이되기를 바랍니다 :)-감사합니다.

이벤트 처리기 자체를 실행하는 동안 속성이 변경 될 수 Click있으므로 checkbox 속성에 이벤트 처리기를 사용하는 것은 신뢰할 수 없습니다 checked!

이상적으로, 당신은에 코드를 넣어 싶어 change이 (독립적 인 체크 박스의 값이 변경 될 때마다 해고 등의 이벤트 처리기 방법 이 그렇게 것을).

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

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

사용하다:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad

$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

이것은 검사를 제거 할 때가 아닌 상자를 선택했을 때만 필요한 조치를 수행해야하는 경우에 도움이 될 수 있습니다.

jQuery없이 똑같은 일을하는 방법에 대한 답변을 게시하기로 결정했습니다. 난 반역자니까

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

먼저 ID로 두 요소를 얻습니다. 그런 다음 확인란의 onchange이벤트를 선택하여 확인란의 선택 여부를 확인 hidden하고 연령 텍스트 필드 의 속성을 적절하게 설정합니다. 이 예에서는 삼항 연산자를 사용합니다.

테스트 할 바이올린 이 여기 있습니다.

추가

브라우저 간 호환성이 문제라면 CSS display속성을 none 및 inline 으로 설정하는 것이 좋습니다.

elem.style.display = this.checked ? 'inline' : 'none';

느리지 만 크로스 브라우저와 호환됩니다.

나는 당신이 이것을 할 수 있다고 믿습니다.

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

나는 똑같은 문제에 부딪쳤다. ASP.NET 확인란이 있습니다

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

jQuery 코드에서 다음 선택기를 사용하여 확인란을 선택했는지 여부를 확인했으며 매력처럼 작동합니다.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

CssClass 대신 ID를 사용할 수도 있습니다.

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

이것이 도움이되기를 바랍니다.

확인란이 선택되어 있는지 확인하는 방법에는 여러 가지가 있습니다.

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

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

예를 확인하거나 문서화하십시오.

• http://api.jquery.com/attr/

• http://api.jquery.com/prop/

이 코드는 당신을 도울 것입니다

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});

이것은 나를 위해 작동합니다 :

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});

이것은 똑같은 일을하는 다른 방법입니다.

$(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>

이것을 사용하십시오 :

if ($('input[name="salary_in.Basic"]:checked').length > 0)

확인란을 선택하면 길이가 0보다 큽니다.

이 작업을 수행하는 방법은 다음과 같습니다.

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

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

true입력이 점검되고 false그렇지 않으면 리턴 합니다 .

$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

당신이 사용할 수있는:

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

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

둘 다 작동해야합니다.

1) HTML 마크 업이 다음과 같은 경우 :

<input type="checkbox"  />

사용 된 속성 :

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

소품을 사용하는 경우 :

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) HTML 마크 업이 다음과 같은 경우 :

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

사용 된 속성 :

$(element).attr("checked") // Will return checked whether it is checked="true"

소품 사용 :

$(element).prop("checked") // Will return true whether checked="checked"

이 예제는 버튼입니다.

다음을 시도하십시오 :

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

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

<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')기능 을 사용하여 요소 # 동의 (확인란)가 선택되었는지 확인 합니다. #saveForm 요소에서 페이드 인 경우 saveForm 요소에서 페이드 아웃되지 않은 경우

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

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

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

당신이 당신의 문제에 대한 자바 스크립트 솔루션을 제안했지만 (A 표시 textboxA는 경우 checkbox이다 checked),이 문제는 해결 될 수있는 단지 CSS에 의해 . 이 방법을 사용하면 JavaScript를 비활성화 한 사용자에게 양식이 작동합니다.

다음 HTML이 있다고 가정합니다.

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

다음 CSS를 사용하여 원하는 기능을 수행 할 수 있습니다.

 #show_textbox:not(:checked) + input[type=text] {display:none;}

다른 시나리오의 경우 적절한 CSS 선택기를 생각할 수 있습니다.

여기이 방법을 설명하는 바이올린이 있습니다.

토글 : 0/1 또는 기타

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

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});

나는 그것이 간단한 것 같아요

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