jQuery 체크 박스 체크 상태 변경 이벤트

jQuery 체크 박스 체크 상태 변경 이벤트

---

확인란이 선택 / 선택 취소 될 때 클라이언트 측에서 이벤트를 실행하고 싶습니다.

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

기본적으로 페이지의 모든 확인란에 대해 발생하기를 원합니다. 클릭시 실행되고 상태를 확인하는이 방법은 괜찮습니까?

더 깨끗한 jQuery 방식이 있어야한다고 생각합니다. 누구든지 해결책을 알고 있습니까?

---

change대신 이벤트에 바인딩합니다 click. 그러나 확인란이 선택되어 있는지 여부를 확인해야 할 수도 있습니다.

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

change이벤트에 대한 click이벤트 바인딩의 주요 이점은 확인란을 모두 클릭해도 상태가 변경되지는 않는다는 것입니다. 확인란의 상태를 변경하는 이벤트 만 캡처하려는 경우 적절한 이름의 change이벤트가 필요합니다. 댓글에서 수정 됨

또한 this.checkedDOM 요소의 속성에 직접 액세스하는 것이 더 짧고 빠르기 때문에 jQuery 개체에 요소를 래핑하고 jQuery 메서드를 사용하는 대신 사용했습니다.

편집 (댓글 참조)

모든 확인란을 얻으려면 몇 가지 옵션이 있습니다. :checkbox의사 선택기를 사용할 수 있습니다 .

$(":checkbox")

또는 속성 같음 선택기를 사용할 수 있습니다 .

$("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 대답을 참조하십시오.

BTW input[type='checkbox']:checked is CSS selector.

---

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

---

Action taking based on an event (on click event).

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

Without event taking action based on current state.

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

---

This is the solution to find is the checkbox is checked or not. Use the #prop() function//

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

---

perhaps this may be an alternative for you.

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

---

Try this jQuery validation

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

---

Is very simple, this is the way I use:

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

Regards!

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