JavaScript, jQuery 또는 바닐라를 사용하여 확인란을 선택 / 선택 취소 할 수 있습니까?
답변
자바 스크립트 :
// Check
document.getElementById("checkbox").checked = true;
// Uncheck
document.getElementById("checkbox").checked = false;
jQuery (1.6 이상) :
// Check
$("#checkbox").prop("checked", true);
// Uncheck
$("#checkbox").prop("checked", false);
jQuery (1.5-) :
// Check
$("#checkbox").attr("checked", true);
// Uncheck
$("#checkbox").attr("checked", false);
답변
아직 언급되지 않은 중요한 행동 :
checked 속성을 프로그래밍 방식으로 설정하면 change
확인란 의 이벤트가 발생하지 않습니다 .
이 바이올린에서 직접보십시오 :
http://jsfiddle.net/fjaeger/L9z9t04p/4/
(Chrome 46, Firefox 41 및 IE 11에서 바이올린 테스트)
click()
방법
언젠가는 코드가 작성되는 것을 발견 할 수 있는데, 이는 발생하는 이벤트에 의존합니다. 이벤트가 발생하는지 확인하려면 click()
다음과 같이 확인란 요소 의 메소드를 호출하십시오 .
document.getElementById('checkbox').click();
그러나,이 대신 구체적으로 설정하는 체크 박스의 체크 상태를 전환 true
하거나 false
. 기억 그 change
이벤트해야에만 화재, checked 속성이 실제로 변경됩니다.
사용하여 속성을 설정 : 또한 jQuery를 방법에 적용 prop
하거나 attr
화재하지 않는 change
이벤트.
checked
특정 값으로 설정
메소드 checked
를 호출하기 전에 속성을 테스트 할 수 click()
있습니다. 예:
function toggle(checked) {
var elm = document.getElementById('checkbox');
if (checked != elm.checked) {
elm.click();
}
}
클릭 방법에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click을 참조 하십시오.
답변
확인하다:
document.getElementById("id-of-checkbox").checked = true;
선택을 해제하려면 :
document.getElementById("id-of-checkbox").checked = false;
답변
미립자 확인란을 다음과 같이 확인할 수 있습니다.
$('id of the checkbox')[0].checked = true
로 확인을 취소하고
$('id of the checkbox')[0].checked = false
답변
‘checked’속성을 비어 있지 않은 문자열로 설정하면 확인란이 선택됩니다.
따라서 ‘checked’속성을 “false” 로 설정하면 확인란이 선택됩니다. 확인란을 선택하지 않도록 값을 빈 문자열, null 또는 부울 값 false 로 설정해야했습니다.
답변
이 시도:
//Check
document.getElementById('checkbox').setAttribute('checked', 'checked');
//UnCheck
document.getElementById('chk').removeAttribute('checked');
답변
<script type="text/javascript">
$(document).ready(function () {
$('.selecctall').click(function (event) {
if (this.checked) {
$('.checkbox1').each(function () {
this.checked = true;
});
} else {
$('.checkbox1').each(function () {
this.checked = false;
});
}
});
});
</script>