jQuery에서 체크박스가 켜져 있는지 확인합니다.

jQuery에서 체크박스가 켜져 있는지 확인합니다.

체크박스 어레이의 ID를 사용하여 체크박스 어레이의 체크박스가 켜져 있는지 확인하려면 어떻게 해야 합니까?

아래 코드를 사용하고 있는데 id에 관계없이 체크박스의 개수를 항상 반환합니다.

function isCheckedById(id) {
    alert(id);
    var checked = $("input[@id=" + id + "]:checked").length;
    alert(checked);

    if (checked == 0) {
        return false;
    } else {
        return true;
    }
}

$('#' + id).is(":checked")

체크 박스가 온이 되어 있는 경우,

같은 이름의 체크 박스가 배열되어 있는 경우는, 다음의 순서로 체크 박스의 리스트를 취득할 수 있습니다.

var $boxes = $('input[name=thename]:checked');

그런 다음 이 항목을 반복하여 체크한 내용을 확인합니다.

$boxes.each(function(){
    // Do stuff here with this
});

체크할 수 있는 수량을 확인하려면 다음 작업을 수행합니다.

$boxes.length;

ID는 문서에서 고유해야 합니다. 즉, 다음과 같이 하면 안 됩니다.

<input type="checkbox" name="chk[]" id="chk[]" value="Apples" />
<input type="checkbox" name="chk[]" id="chk[]" value="Bananas" />

대신 ID를 삭제한 후 이름 또는 포함된 요소별로 선택합니다.

<fieldset id="checkArray">
    <input type="checkbox" name="chk[]" value="Apples" />

    <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

이제 jQuery:

var atLeastOneIsChecked = $('#checkArray:checkbox:checked').length > 0;
//there should be no space between identifier and selector

// or, without the container:

var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;

$('#checkbox').is(':checked'); 

위의 코드는 체크박스를 켜면 true를 반환하고 켜지 않으면 false를 반환합니다.

다음의 모든 방법이 도움이 됩니다.

$('#checkbox').is(":checked")

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

$('#checkbox')[0].checked

$('#checkbox').get(0).checked

dOMelement 또는 인라인 "this.checked"를 사용하지 않고 jQuery on 메서드를 이벤트청취자로 사용할 것을 권장합니다.

jQuery code 체크박스가 켜져 있는지 여부를 확인합니다.

if($('input[name="checkBoxName"]').is(':checked'))
{
  // checked
}else
{
 // unchecked
}

대체 방법:

if($('input[name="checkBoxName"]:checked'))
{
    // checked
}else{
  // unchecked
}

체크된 속성에 대해 기억해야 할 가장 중요한 개념은 체크된 속성과 일치하지 않는다는 것입니다.이 속성은 실제로 default Checked 속성에 대응하며 체크박스의 초기값을 설정할 때만 사용해야 합니다.선택한 속성 값은 확인란 상태에 따라 변경되지 않지만 선택한 속성은 변경되지 않습니다.따라서 체크박스가 켜져 있는지 여부를 확인하는 크로스 브라우저 호환 방법은 속성을 사용하는 것입니다.

아래의 모든 방법을 사용할 수 있습니다.

elem.checked 

$(elem).prop("checked") 

$(elem).is(":checked") 

이것도 제가 자주 사용하는 아이디어입니다.

var active = $('#modal-check-visible').prop("checked") ? 1 : 0 ;

체크박스를 켜면 1이 반환되고 켜지지 않으면 0이 반환됩니다.

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

if($("#checkboxId").is(':checked')){
     // Code in the case checkbox is checked.
} else {
     // Code in the case checkbox is NOT checked.
}

jQuery 설명서에 따르면 체크박스가 켜져 있는지 여부를 확인하는 방법은 다음과 같습니다.예를 들어 확인란(모든 예제와 함께 작업 jsfiddle 확인)을 고려합니다.

<input type="checkbox" name="mycheckbox" id="mycheckbox" />
<br><br>
<input type="button" id="test-with-checked" value="Test with checked" />
<input type="button" id="test-with-is" value="Test with is" />
<input type="button" id="test-with-prop" value="Test with prop" />

예 1 - 체크 마크가 붙어 있는 경우

$("#test-with-checked").on("click", function(){
    if(mycheckbox.checked) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

예 2 - jQuery의 경우 메모 - 체크 표시:

var check;
$("#test-with-is").on("click", function(){
    check = $("#mycheckbox").is(":checked");
    if(check) {
        alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

예 3 - jQuery 소품 사용

var check;
$("#test-with-prop").on("click", function(){
    check = $("#mycheckbox").prop("checked");
    if(check) {
         alert("Checkbox is checked.");
    } else {
        alert("Checkbox is unchecked.");
    }
}); 

작업 확인 jsfiddle

OP가 jquery를 원하는 것은 알지만, 내 경우 순수 JS가 답이었기 때문에 나와 같은 사람이 여기에 있고 jquery를 가지고 있지 않거나 사용하고 싶지 않은 경우 - JS의 답변은 다음과 같습니다.

document.getElementById("myCheck").checked

ID myCheck 입력이 선택되어 있으면 true를 반환하고, 선택되어 있지 않으면 false를 반환합니다.

그렇게 간단하다.

다음과 같이 시험해 보십시오.

<script>
function checkAllCheckBox(value)
{
   if($('#select_all_').is(':checked')){
   $(".check_").attr ( "checked" ,"checked" );
    }
    else
    {
        $(".check_").removeAttr('checked');
    }

 }

</script>
<input type="checkbox" name="chkbox" id="select_all_" value="1" />


<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />
<input type="checkbox" name="chkbox" class="check_" value="Apples" />
<input type="checkbox" name="chkbox" class="check_" value="Bananas" />

jquery별로 다음 권장 코드 중 하나를 사용할 수 있습니다.

if ( elem.checked ) {};
if ( $( elem ).prop( "checked" ) ) {};
if ( $( elem ).is( ":checked" ) ) {};

다음과 같이 간단하게 할 수 있습니다.

현용 바이올린

HTML

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

j쿼리

$(document).ready(function () {
    var ckbox = $('#checkbox');

    $('input').on('click',function () {
        if (ckbox.is(':checked')) {
            alert('You have Checked it');
        } else {
            alert('You Un-Checked it');
        }
    });
});

또는 더 단순하다.

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

경우,checkbox됩니다.true 않으면undefined

$(document).on('click','#checkBoxId',function(){
  var isChecked = $(this).is(':checked');
  console.log(isChecked);
});

위의 코드는 부트스트랩모달에서도 동작합니다.체크 마크가 참인지 점멸인지 여부

체크박스를 켜고 설정하기 위한 간단한 데모입니다.

jsfiddle!

$('.attr-value-name').click(function() {
    if($(this).parent().find('input[type="checkbox"]').is(':checked'))
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    }
    else
    {
        $(this).parent().find('input[type="checkbox"]').prop('checked', true);
    }
});

예를 들어 이 상황은 대화상자를 닫기 전에 체크박스를 확인하는 대화상자였습니다.위의 항목 중 하나와 체크박스가 jQuery? 및 jQuery에서 체크박스가 켜져 있는지 확인하는 방법도 작동하지 않는 것으로 보입니다.

마침내.

<input class="cb" id="rd" type="checkbox">
<input class="cb" id="fd" type="checkbox">

var fd=$('.cb#fd').is(':checked');
var rd= $('.cb#rd').is(':checked');

아이디가 아니라 아이디로 반을 부르는 게 효과가 있었어요.이 페이지의 중첩된 DOM 요소가 문제의 원인일 수 있습니다.위의 회피책은 다음과 같습니다.

ID가 있는 확인란

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

간단히 할 수 있다

$("#id_input_checkbox13").prop('checked')

얻을 수 있다true ★★★★★★★★★★★★★★★★★」false위의 구문에 대한 반환값으로 지정합니다.expression으로 할 수 .

실제로 jsperf.com에 따르면 DOM 작업이 가장 빠르며 $(.prop) 뒤에 $(.is()!)가 계속됩니다.

구문은 다음과 같습니다.

var checkbox = $('#'+id);
/* OR var checkbox = $("input[name=checkbox1]"); whichever is best */

/* The DOM way - The fastest */
if(checkbox[0].checked == true)
   alert('Checkbox is checked!!');

/* Using jQuery .prop() - The second fastest */
if(checkbox.prop('checked') == true)
   alert('Checkbox is checked!!');

/* Using jQuery .is() - The slowest in the lot */
if(checkbox.is(':checked') == true)
   alert('Checkbox is checked!!');

는 개인적으로 ★★★★★★★★★★★★★★★★★★를 선호합니다..prop()는 다르다.와는 달리.is()값 설정에도 사용할 수 있습니다.

이런 것이 도움이 될 수 있다

togglecheckBoxs =  function( objCheckBox ) {

    var boolAllChecked = true;

    if( false == objCheckBox.checked ) {
        $('#checkAll').prop( 'checked',false );
    } else {
        $( 'input[id^="someIds_"]' ).each( function( chkboxIndex, chkbox ) {
            if( false == chkbox.checked ) {
                $('#checkAll').prop( 'checked',false );
                boolAllChecked = false;
            }
        });

        if( true == boolAllChecked ) {
            $('#checkAll').prop( 'checked',true );
        }
    }
}

체크박스를 끄다

$("#checkall").click(function(){
    $("input:checkbox").prop( 'checked',$(this).is(":checked") );
})

이거 드셔보세요.

$(function(){
  $('body').on('click','.checkbox',function(e){
    
    if($(this).is(':checked')){
      console.log('Checked')
    } else {
      console.log('Unchecked')
    }
  })
})

이 코드를 사용하면 다른 체크박스 그룹 또는 여러 체크박스에서 적어도1개의 체크박스가 선택되어 있는지 여부를 체크할 수 있습니다.이를 사용하면 ID 또는 동적 ID를 삭제할 필요가 없습니다.이 코드는 같은 ID로 동작합니다.

참조 링크

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox21" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox22" value=ck2 /> ck2<br />

<label class="control-label col-sm-4">Check Box 3</label>
    <input type="checkbox" name="checkbox3" id="checkbox31" value=ck3 /> ck3<br />
    <input type="checkbox" name="checkbox3" id="checkbox32" value=ck4 /> ck4<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    if (!$('input[name=checkbox3]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>

지금은 2019년 중반이기 때문에 jQuery는 VueJs, React 등에 밀려있을 수 있습니다.다음은 순수 바닐라 자바스크립트 온로드 리스너 옵션입니다.

<script>
  // Replace 'admincheckbox' both variable and ID with whatever suits.

  window.onload = function() {
    const admincheckbox = document.getElementById("admincheckbox");
    admincheckbox.addEventListener('click', function() {
      if(admincheckbox.checked){
        alert('Checked');
      } else {
        alert('Unchecked');
      }
    });
  }
</script>

시 " ID하고 "체크박스 배열 ID"를 얻으려고 .'아이디'true/falseoutput - 이 방법에서는 어떤 체크박스가 선택되었는지 알 수 없습니다(기능 이름에서 알 수 있음).는 당신의 입니다.isCheckedById 시 체크박스를 .id 출력 시 " " "true/false는 키워드가 는 안 됩니다 (ID는 키워드가 되어서는 안 됩니다),

this[id].checked

function isCheckedById(id) {
  return this[id].checked;
}



// TEST

function check() {
  console.clear()
  console.log('1',isCheckedById("myCheckbox1"));
  console.log('2',isCheckedById("myCheckbox2"));
  console.log('3',isCheckedById("myCheckbox3"));
}

<label><input id="myCheckbox1" type="checkbox">check 1</label>
<label><input id="myCheckbox2" type="checkbox">check 2</label>
<label><input id="myCheckbox3" type="checkbox">check 3</label>
<!-- label around inputs makes text clickable -->
<br>
<button onclick="check()">show checked</button>

아래 코드를 사용하다

<script>

$(document).ready(function () {
  $("[id$='chkSendMail']").attr("onchange", "ShowMailSection()");
}

function ShowMailSection() {
  if ($("[id$='chkSendMail'][type='checkbox']:checked").length >0){
      $("[id$='SecEmail']").removeClass("Hide");
  }
</script>

언급URL : https://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery