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



html dom (20)

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

checked 박스 DOM 요소의 checked 속성은 요소의 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>

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

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

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

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

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


Answer #1

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

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

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

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

Answer #2

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
}

Answer #3

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

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

Answer #4

나는 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 속성을 적절하게 설정하는 함수를 지정합니다. 이 예제에서는 삼항 연산자를 사용합니다.

당신이 그것을 테스트 할 수있는 fiddle 입니다.

추가

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

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

느리지 만 브라우저 간 호환.


Answer #5

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

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

Answer #6

나는 똑같은 문제로 달렸다. 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 { ... }

나는 이것이 당신을 돕기를 바랍니다.


Answer #7

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

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

참고 : 확인란을 선택하면 정의되지 않은 경우 true를 반환하므로 "TRUE"값을 더 잘 확인하십시오.


Answer #8

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

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

Answer #9

당신이 사용할 수있는:

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

둘 다 작동해야합니다.


Answer #10

용도:

<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


Answer #11

이 예제는 버튼 용입니다.

다음을 시도하십시오.

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

Answer #12

이것은 나를 위해 일했다 :

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

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

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

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


Answer #13

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

/* isAgeSelected being id for checkbox */

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

Answer #14

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

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

Answer #15

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

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

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

예제 또는 문서 확인 :


Answer #16

토글 : 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');
    };
});

Answer #17

1) HTML 마크 업 :

<input type="checkbox"  />

사용 된 attr :

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

사용 된 attr :

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

사용 된 소품 :

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

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

Answer #19
$(selector).attr('checked') !== undefined

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





checkbox