jQuery 또는 순수 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)브라우저 간 호환성 향상을 위해 대신 사용해야합니다. https://api.jquery.com/prop 참조
var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }
$('input:checkbox').each(function() { this.checked = false; });
반대로 수행하려면 다음을 참조하십시오. ID / 클래스별로 모든 확인란 선택
Tatu Ulmanen의 답변 에서 말했듯 이 다음 스크립트를 사용하면 작업이 수행됩니다.
$('input:checkbox').removeAttr('checked');
그러나 Blakomen의 의견에서 말했듯이 버전 1.6 이후에는 jQuery.prop()대신 사용하는 것이 좋습니다.
jQuery v1.6 이상에서는 브라우저 간 호환성을 높이기 위해 대신 .prop ( 'checked', false)를 사용해야합니다.
$('input:checkbox').prop('checked', false);
사용시 jQuery.each()성능 문제가 발생할 수 있으므로 주의하십시오 . (또한 jQuery.find()이러한 경우 피 하십시오. 대신 각각 사용)
$('input[type=checkbox]').each(function()
{
$(this).prop('checked', false);
});
<!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>