자바 스크립트 코드를 통해 체크 된 경우에도 체크 박스 클릭 이벤트를 트리거하는 방법은 무엇입니까?


80

내 페이지에 많은 확인란이 있고 모든 확인란을 선택하는 모두 선택 확인란이 있습니다. 어떻게 든 모두 선택 버튼을 통해 선택 / 선택 취소하더라도 확인란의 클릭 이벤트를 에뮬레이션하고 싶습니다. 내가 어떻게 해?

답변:


117

jQuery .trigger()메서드를 사용할 수 있습니다 . 참조 http://api.jquery.com/trigger/를

예 :

$('#foo').trigger('click');

13
을 (를) 호출 할 수도 있습니다 $('#foo').click(). 이는 동일한 작업을 효과적으로 수행합니다.
Kevin Babcock 2013 년

2
순수 자바 스크립트로이를 수행하는 방법?
Paul

6
표시 trigger('click')는 현재 값을 토글합니다. 당신은 그 다음 설정 설정하려면 checked다음 triggerHandler 전화 true로 (...) stackoverflow.com/questions/10268222/...
rogerdpack

1
제 3자를 사용해야 할 때 이와 같은 게시물이 정확히 어떻게 표시됩니까? 그는 jQuery 솔루션을 요구하지 않았습니다.
Wancieho

@Wancieho 질문에는 'jquery'태그가 있습니다.
Mark Robinson

15

상태 확인하기

var checked = $("#selectall").is(":checked");

그런 다음 설정

$("input:checkbox").attr("checked",checked);

9
요즘 attr사용 하는 것과 같이 시도하지 prop않았지만이 방법은 체크 박스 만 체크하고 이후에 각각 클릭 이벤트를 발생시키지 않습니다
EvilDr

9

.change()기능도 사용할 수 있습니다

예 :

$('form input[type=checkbox]').change(function() { console.log('hello') });

Javascript를 통해 확인란 변경이 수행되면 이것은 나를 위해 작동하지 않습니다.
Flimm

6

gQuery 없음

document.getElementById ( 'your_box'). onclick ();

내 체크 박스에 특정 클래스를 사용했습니다.

var x = document.getElementsByClassName("box_class");
var i;
for (i = 0; i < x.length; i++) {
    if(x[i].checked) x[i].checked = false;
    else x[i].checked = true;
    x[i].onclick();
   }

6

당신도 이것을 사용할 수 있습니다. 나는 당신이 그들을 섬길 수 있기를 바랍니다.

$(function(){
  $('#elements input[type="checkbox"]').prop("checked", true).trigger("change");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="elements">
  <input type="checkbox" id="item-1" value="1"> Item 1 <br />
  <input type="checkbox" id="item-2" value="2" disabled> Item 2 <br /> 
  <input type="checkbox" id="item-3" value="3" disabled> Item 3 <br />
  <input type="checkbox" id="item-4" value="4" disabled> Item 4 <br />
  <input type="checkbox" id="item-5" value="5"> Item 5
</div>


4

jQuery의 트리거 기능이 답이 될 수 있습니다.

jQuery 문서에 따르면 : .on () 또는 바로 가기 메서드 중 하나가 첨부 된 모든 이벤트 처리기는 해당 이벤트가 발생할 때 트리거됩니다. 그러나 .trigger () 메서드를 사용하여 수동으로 실행할 수 있습니다. .trigger ()에 대한 호출은 이벤트가 사용자에 의해 자연스럽게 트리거 된 경우와 동일한 순서로 핸들러를 실행합니다.

따라서 최상의 한 줄 솔루션은 다음과 같아야합니다.

$('.selector_class').trigger('click');

//or

$('#foo').click();

1
  $("#gst_show>input").change(function(){

    var checked = $(this).is(":checked");
    if($("#gst_show>input:checkbox").attr("checked",checked)){
      alert('Checked Successfully');
    }

  });

2
코드를 설명 할 수
Yilmaz
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.