jQuery 확인란이 상태 변경 이벤트 선택됨

jQuery 확인란이 상태 변경 이벤트 선택됨

체크박스를 켜거나 끄면 클라이언트 측에서 이벤트를 기동합니다.

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

기본적으로 페이지 상의 모든 체크박스에 대해 이 작업을 수행했으면 합니다.이 클릭으로 기동하여 상태를 확인하는 방법은 괜찮습니까?

좀 더 깔끔한 방법이 있을 것 같아요해결책을 아는 사람?

에 바인드하다change대신 이벤트click다만, 체크 박스가 온이 되어 있는지 아닌지는 확인할 필요가 있습니다.

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

와의 결합의 주요 이점 change에 관한 사건 click이벤트란 체크박스를 클릭해도 상태가 바뀌지 않는 것입니다.체크 박스의 상태를 변경하는 이벤트만을 캡처하는 경우는, 적절한 이름을 붙입니다. change이벤트입니다. 코멘트로 리다이렉트

또, 제가 사용한 것은this.checked요소를 jQuery 개체로 감싸고 jQuery 메서드를 사용하는 대신 DOM 요소의 속성에 직접 액세스하는 것이 더 짧고 빠르기 때문입니다.

편집(댓글 참조)

모든 체크박스를 켜려면 몇 가지 옵션이 있습니다.의사 선택기를 사용할 수 있습니다.

$(":checkbox")

또는 Atribute equals selector를 사용할 수 있습니다.

$("input[type='checkbox']")

나중에 문제가 있는 사용자를 위해 체크박스를 동적으로 추가할 경우 위의 올바른 답변이 작동하지 않습니다.상위 노드가 특정 하위 노드에서 버블된 이벤트를 캡처하고 콜백을 발행할 수 있도록 이벤트 위임을 활용해야 합니다.

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

주의: 대부분의 경우 사용할 필요가 없습니다.document부모 셀렉터널 셀렉터대신 이벤트가 너무 많은 레벨로 전파되지 않도록 보다 구체적인 부모 노드를 선택합니다.

다음 예시는 동적으로 추가된 dom 노드의 이벤트가 미리 정의된 청취자를 트리거하지 않는 방법을 보여 줍니다.

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

이 예에서는 이벤트 위임을 사용하여 특정 노드의 이벤트를 캡처하는 방법을 보여 줍니다(단,h1콜백을 발행합니다.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

다른 솔루션일 뿐

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

체크박스가 켜져 있는 경우에만 이벤트를 첨부할 경우(이 체크박스가 꺼졌다가 나중에 다시 켜졌을 때 이벤트가 발생함) 이것이 원하는 것입니다.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

모든 체크박스에 이벤트를 첨부하는 경우(체크박스와 오프)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

체크되고 있을 때(체크박스를 끄고 있을 때)에만 기동하도록 하려면 위의 @James Allardice에 응답합니다.

の b b b 。input[type='checkbox']:checkedCSS 렉렉 다다다다 。

매우 심플하고, 다음과 같이 사용하고 있습니다.

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

안부 전해 주세요!

$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});

체크 박스가 온이 되어 있는지 아닌지에 관계없이, 이 솔루션을 찾을 수 있습니다.#prop() 함수를 사용합니다//

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

다음과 같이 할 수도 있습니다.체크박스를 켜면 #checkbox id를 가진 div 또는 컨트롤이 숨겨지거나 다르게 표시됩니다.

 <script>
      $('#checkbox').on('click',function(){
          if(this.checked){
              $('#checkbox').hide();
           }else{
              $('#checkbox').show();
           }
      });
 </script>

이벤트를 기반으로 한 액션 실행(클릭 시 이벤트).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

이벤트 없이 현재 상태에 따라 조치를 취합니다.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

어쩌면 이게 당신에게 대안이 될 수도 있어요.

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

이 jQuery 유효성 검사 시도

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>

소규모 JS 프로젝트에서 사용할 수 있는 이 "html-access"를 사용해 보십시오.

function msg(animal,is) {
  console.log(animal, is.checked);   // Do stuff
}

<input type="checkbox" oninput="msg('dog', this)" />Do you have a dog? <br>
<input type="checkbox" oninput="msg('frog',this)" />Do you have a frog?<br>
...

은 '사용하다'입니다.prop 아니다attrchecked:

• 답::jQuery('#my_check_tag').prop('checked') // return correct status
• 렸:::jQuery('#my_check_tag').attr('checked') // always return undefined

언급URL : https://stackoverflow.com/questions/8423217/jquery-checkbox-checked-state-changed-event