jQuery 또는 순수 JS를 사용하여 모든 확인란을 재설정하는 방법은 무엇입니까?

84

jQuery 또는 순수 JS를 사용하여 문서의 모든 확인란을 어떻게 재설정 할 수 있습니까?

javascript jquery checkbox

145

모든 체크 박스에서 '체크 됨'상태를 제거하는 방법을 의미하는 경우 :

$('input:checkbox').removeAttr('checked');

— 타투 울 마넨
소스

이 스크립트는 확인란 상태를 전환합니다. 내가 뭔가 잘못하고 있는지 확실하지 않음

— Sundeep

38

jQuery v1.6 이상에서는 브라우저 간 호환성 향상을 위해 대신 .prop ( 'checked', false)를 사용해야합니다. api.jquery.com/prop

— Henry C

새 대화 상자를 열기 전에이를 사용하여 양식을 재설정했습니다. 이 후 하나의 확인란을 '체크'해야하지만 작동하지 않습니다. 생성 된 코드를 보면 '확인'되었지만 내 페이지에서는 $ ( 'input : checkbox'). removeAttr ( 'checked'); $ ( 'input [value ='+ val + ']'). attr ( 'checked', true);

— Gayane

1

이것은 이제 쓸모없는 대답입니다-참조 : stackoverflow.com/questions/17420534/…

— raison

47

양식의 재설정 기능을 사용하려면 다음을 사용하는 것이 좋습니다.

$('input[type=checkbox]').prop('checked',true);

또는

$('input[type=checkbox]').prop('checked',false);

removeAttr()로 재설정 할 수없는 것 같습니다 form.reset().

— 케빈 큐 유
소스

1

허용되는 답변도 작동하지만 이것이 최선의 방법이라고 생각합니다. 이 글을 읽고 있다면 모범 사례이므로이 방법을 사용해보십시오.

— rafaelmorais

13

위의 답변은 저에게 효과적이지 않았습니다.

다음은 작동했습니다.

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
});

이렇게하면 모든 확인란이 선택 취소됩니다.

— 선딥
소스

11

경우에 따라 확인란이 기본적으로 선택 될 수 있습니다. 선택되지 않은 상태로 설정하지 않고 기본 선택을 복원하려면 defaultChecked속성을 비교하십시오 .

$(':checkbox').each(function(i,item){ 
        this.checked = item.defaultChecked; 
});

— 딘 버지
소스

11

나는 이것을 전에 사용했습니다.

$('input[type=checkbox]').prop('checked', false);

.attr 및 .removeAttr이 일부 상황에서 작동하지 않는 것 같습니다.

편집 : jQuery v1.6 이상에서는 .prop('checked', false)브라우저 간 호환성 향상을 위해 대신 사용해야합니다. https://api.jquery.com/prop 참조

여기에 주석 : jQuery 또는 순수 JS를 사용하여 모든 확인란을 재설정하는 방법은 무엇입니까?

— jef
소스

7

자바 스크립트

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 / 클래스별로 모든 확인란 선택

— 케 노브
소스

4

 $(":checkbox:checked").each(function () {

 this.click(); 
});

체크되지 않은 체크 박스로, 반대로 논리를 돌려

— 예네 물 라투
소스

3

체크 박스를 선택할 수있는 div 또는 페이지의 일부를 선택할 수 있습니다. 내 페이지에 두 가지 양식이 있고 하나는 미리 채워진 값 (업데이트 용)이 있고 다른 하나는 새로 채워야하는 시나리오를 보았습니다.

$('#newFormId input[type=checkbox]').attr('checked',false);

이렇게하면 id newFormId가 선택되지 않은 양식의 확인란 만 만들어집니다.

— Kavinder
소스

2

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

— 미셸 아이레스
소스

1

나는 그런 것을 사용했다

$(yourSelector).find('input:checkbox').removeAttr('checked');

— 안드레이 가스파르
소스

1

<!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>

— Ankush
소스

3

코드 전용 답변은 권장되지 않습니다. 정말 몇 가지 설명을 포함하고 싶습니다.

— GhostCat