jQuery 또는 pure JS를 사용하여 모든 체크박스를 리셋하는 방법?
jQuery 또는 pure JS를 사용하여 문서의 모든 체크박스를 재설정하려면 어떻게 해야 합니까?
모든 확인란에서 '체크된' 상태를 제거하는 방법을 의미하는 경우:
$('input:checkbox').removeAttr('checked');
양식의 재설정 기능을 사용하려면 다음을 사용하는 것이 좋습니다.
$('input[type=checkbox]').prop('checked',true);
오어
$('input[type=checkbox]').prop('checked',false);
처럼 보인다removeAttr()에 의해 재설정될 수 없습니다.form.reset().
이전에 사용한 적이 있습니다.
$('input[type=checkbox]').prop('checked', false);
는 것 같습니다..attr()그리고..removeAttr()어떤 상황에서는 통하지 않습니다.
참고: jQuery v1.6 이상에서는 다음을 사용해야 합니다.
.prop('checked', false)대신 browser 간 호환성을 향상시키려면 https://api.jquery.com/prop 을 참조하십시오.
위의 대답은 나에게 통하지 않았습니다.
다음이 통했습니다.
$('input[type=checkbox]').each(function()
{
this.checked = false;
});
이렇게 하면 모든 확인란이 선택 취소됩니다.
경우에 따라 이 확인란은 기본적으로 선택될 수 있습니다.선택하지 않은 상태로 설정하지 않고 기본 선택을 복원하려면defaultChecked소유물.
$(':checkbox').each(function(i,item){
this.checked = item.defaultChecked;
});
자바스크립트
var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }
jQuery
$('input:checkbox').each(function() { this.checked = false; });
반대로 하려면 ID/클래스별 모든 확인란 선택을 참조하십시오.
$(":checkbox:checked").each(function () {
this.click();
});
체크박스를 선택하지 않은 상태로, 반대로 하기 위해 논리를 돌립니다.
Tatu Ulmanen의 답변에서 말했듯이 팔로우 스크립트를 사용하면 일을 할 수 있습니다.
$('input:checkbox').removeAttr('checked');
하지만 블라코멘의 말처럼 버전 1.6 이후에는 사용하는 것이 좋습니다.
jQuery v1.6 이상에서는 크로스 브라우저 호환성을 높이기 위해 대신 .prop('checked', false)를 사용해야 합니다.
$('input:checkbox').prop('checked', false);
사용시 주의jQuery.each()성능 문제가 발생할 수 있습니다.(또한 피함)jQuery.find()그 경우에는각각 사용)
$('input[type=checkbox]').each(function()
{
$(this).prop('checked', false);
});
페이지의 어떤 div 또는 어떤 부분에 확인란을 선택할 수 있는지와 선택하지 않을 수 있는지 선택할 수 있습니다.페이지에 두 가지 양식이 있고 하나는 (업데이트를 위해) 미리 채워진 값이 있고 다른 양식은 새로 채워져야 하는 시나리오를 우연히 발견했습니다.
$('#newFormId input[type=checkbox]').attr('checked',false);
이렇게 하면 ID newFormId가 선택되지 않은 형태의 확인란만 선택 취소됩니다.
그런 걸 썼어요.
$(yourSelector).find('input:checkbox').removeAttr('checked');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container check">
<button class="btn">click</button>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
</div>
<script>
$('.btn').click(function() {
$('input[type=checkbox]').each(function()
{
this.checked = false;
});
})
</script>
</body>
</html>
쉽죠. 수업시간에 저에게 좋아요를 주세요.
$('.YUCLASS').prop('checked', false);
아니면
$('.YUCLASS').removeAttr('checked');
모두 재설정 확인란
<input type="checkbox" id="bike" name="vehicle" value="bike">
<label for="bike">Bike</label>
<input type="checkbox" id="car" name="vehicle" value="car">
<label for="car">Car</label>
<button id="select">Select All</button>
자바스크립트 #1
이름 필드를 사용하여 모든 확인란을 가져옵니다.
document.getElementById('select').onclick = function() {
var checkboxes = document.getElementsByName('vehicle');
for (var checkbox of checkboxes) {
checkbox.checked = false;
}
}
자바스크립트 #2
체크박스 외에 다른 입력 태그가 없는 경우,
document.getElementById('select').onclick = function() {
var checkboxes = document.getElementsByTagName("input");
for (var checkbox of checkboxes) {
checkbox.checked = false;
}
}
사용했습니다.
jQuery('my_selector_of_checkboxes').prop('checked', false).trigger()
언급URL : https://stackoverflow.com/questions/2279760/how-to-reset-all-checkboxes-using-jquery-or-pure-js
'programing' 카테고리의 다른 글
| asp.net mvc 4에서 jquery ajax 호출 후 서버측 리디렉션 (0) | 2023.09.20 |
|---|---|
| Swift 기본 AlertViewController 제약 조건 위반 (0) | 2023.09.20 |
| Entity Framework가 여러 개의 테이블 이름을 생성하지만 보기에서 하나의 테이블 이름이 필요합니까? (0) | 2023.09.20 |
| AngularJs - '로그인한' 사용자에 대한 접근을 제한하는 최선의 방법 (0) | 2023.09.20 |
| Groovy XmlSlurper 대 XmlParser (0) | 2023.09.20 |