아무것도 선택하지 않도록 jQuery에서 라디오 버튼을 재설정하는 방법


136

HTML에 라디오 버튼이 있습니다.

<td>
    <input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
    <input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
    <input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
    <input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
</td>

이것은 양식 태그에 있으며 사용자가 양식을 제출하면 모든 라디오 버튼을 기본값으로 다시 설정하려고합니다. 그들 중 아무도 확인하지 않았다는 의미입니다.

이 코드가 있지만 오류가 발생합니다. [0] is null or not an object

$('input[@name="correctAnswer"]')[0].checked = false;
$('input[@name="correctAnswer"]')[1].checked = false;
$('input[@name="correctAnswer"]')[2].checked = false;
$('input[@name="correctAnswer"]')[3].checked = false;

IE 6 에서이 작업을 수행하고 있습니다.


@lambacck의 답변이 작동하지 않으면 JQuery 사이트 [ bugs.jquery.com/ticket/10910] 에 버그 추적기가 표시됩니다 . 라디오 버튼 세트를 통해 반복하여 모든 버튼을 기본값으로 재설정 #(selector).prop('checked',true);하려고 시도하면 동일한 그룹의 후속 라디오 버튼을 확인되지 않은 상태로 설정하려고 시도하면 실패합니다. 요령은 라디오 버튼을 선택된 상태로만 설정하고 라디오 버튼 그룹이 수행하는 작업을 수행하도록하는 것입니다 (다른 버튼은 선택 취소 ...) . 또한 전화 $(selector).click();는 작동하며 모든 관련 이벤트를 발생시킵니다.
Cos Callis

답변:


270

1.6 이전의 jQuery 버전에서는 다음을 사용하십시오.

$('input[name="correctAnswer"]').attr('checked', false);

1.6 이후의 jQuery 버전에서는 다음을 사용해야합니다.

$('input[name="correctAnswer"]').prop('checked', false);

그러나 1.6.1 이상을 사용하는 경우 첫 번째 양식을 사용할 수 있습니다 (아래 참고 2 참조).

주 1 : 이 두 번째 인수는 것이 중요하다 거짓 이 아닌 "false"로 부터 "거짓" falsy 값이 아닙니다. 즉

if ("false") {
    alert("Truthy value. You will see an alert");
}

참고 2 : jQuery 1.6.0부터는 두 가지 유사한 메소드가 .attr있으며 .prop두 가지 관련이 있지만 약간 다른 작업을 수행합니다. 이 특별한 경우, 1.6.1 이상을 사용하는 경우 위의 조언이 작동합니다. 위의 1.6.0에서는 작동하지 않습니다. 1.6.0을 사용하는 경우 업그레이드해야합니다. 자세한 내용을 원하면 계속 읽으십시오.

세부 : 직선의 HTML DOM 요소와 작업 할 때, DOM 요소 (에 연결된 속성이있다 checked, type, valueHTML 페이지의 실행 상태에 대한 인터페이스를 제공, 등). HTML에 제공된 HTML 속성 값에 대한 액세스를 제공 하는 .getAttribute/ .setAttribute인터페이스 도 있습니다 . 1.6 이전에는 jQuery가 .attr두 가지 유형의 값 모두에 액세스 할 수있는 한 가지 방법 인을 제공하여 구별을 흐리게했습니다 . jQuery를 1.6은 두 가지 방법을 제공합니다, .attr그리고 .prop이러한 상황을 구별 얻을.

.propDOM 요소에 .attr속성을 설정하고 HTML 속성 값을 설정할 수 있습니다. 당신은 일반 DOM 및 설정 확인 속성을 사용하여 작업하는 경우 elem.checkedtrue또는 false당신이 실행 값 (사용자가 보는 것을) 및 페이지 상태에서 값 반환 추적하는 변경합니다. elem.getAttribute('checked')그러나 초기 상태를 반환 (반환 'checked'또는 undefinedHTML에서 초기 상태에 따라 다름). 사용 1.6.1+에서 .attr('checked', false)모두 수행 elem.removeAttribute('checked')하고 elem.checked = false있기 때문에 변화는 이전 버전과의 호환성 문제가 많이 발생하고 HTML 속성 또는 DOM 속성을 설정하기를 원한다면 정말 말할 수 없습니다. .prop 문서 에서 자세한 정보를 참조하십시오 .


두 번째 인수에는 "false"보다는 false를 전달하는 것이 중요합니다.
Casebash

두 번째 인수는 설정할 값이므로 두 번째 인수의 "거짓"이 중요합니다. 두 번째 인수가 비어 있으면 선택기와 일치하는 첫 번째 요소의 값을 알려줍니다.
lambacck

1
@Noldorin- "진실"은 완벽하게 끔찍한 단어입니다. (단 하나의 단어 만 사용하여 "더러운"개념을 표현하는 더 나은 방법을 제안 할 수 있습니까?)
nnnnnn

어쩌면 충분히 공평합니다. 비록 개인적으로 좀 더 공식적인 "진실한"또는 "의미 적으로 진실 된"것을 선호했을지라도 우리 모두는 요점을 알 것입니다.
Noldorin

3
@Noldorin "Truthy"와 "falsy"는 Brendan EichDouglass Crockford를 포함한 많은 자바 스크립트 전문가들이 사용하는 용어 입니다. 부울 평가는 6 개의 잘못된 값으로 정의 되므로 핵심 용어는 잘못된 것 입니다. 진실은 거짓의 반대에 대한 논리적 이름입니다. 나는 거짓을 사용하는 것이 이것이 당신이 익숙하지 않을 것이라고 생각하게하기 위해 의도적으로 사용되었다고 생각합니다 (0이 거짓 인 다른 C 스타일 구문 언어에서 온 경우).
lambacck

53

jquery에서 라디오 버튼 상태를 설정하는 가장 좋은 방법은 다음과 같습니다.

HTML :

<input type="radio" name="color" value="orange" /> Orange 
<input type="radio" name="color" value="pink" /> Pink 
<input type="radio" name="color" value="black" /> Black
<input type="radio" name="color" value="pinkish purple" /> Pinkish Purple

하나의 버튼을 미리 선택하는 Jquery (1.4+) 코드 :

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").attr("checked","checked");

Jquery 1.6 이상 코드에서는 .prop () 메소드가 선호됩니다.

var presetValue = "black";
$("[name=color]").filter("[value='"+presetValue+"']").prop("checked",true);

버튼을 선택 해제하려면 :

$("[name=color]").removeAttr("checked");

10

문제는 속성 선택기가로 시작하지 않는다는 것 @입니다.

이 시도:

$('input[name="correctAnswer"]').attr('checked', false);

4
$('#radio1').removeAttr('checked');
$('#radio2').removeAttr('checked');
$('#radio3').removeAttr('checked');
$('#radio4').removeAttr('checked');

Or

$('input[name="correctAnswer"]').removeAttr('checked');

4

마지막으로 많은 테스트를 거친 후 사전 설정하는 가장 편리하고 효율적인 방법은 다음과 같습니다.

var presetValue = "black";
$("input[name=correctAnswer]").filter("[value=" + presetValue + "]").prop("checked",true);
$("input[name=correctAnswer]").button( "refresh" );//JQuery UI only

JQueryUI 오브젝트를 사용하여 새로 고쳐야합니다.

값을 쉽게 검색 할 수 있습니다.

alert($('input[name=correctAnswer]:checked').val())

JQuery 1.6.1, JQuery UI 1.8에서 테스트되었습니다.


2

나는 이것이 오래되었고 이것이 주제가 아니라는 것을 알고 있지만 컬렉션의 특정 라디오 버튼 만 선택 취소하려고한다고 가정합니다.

$("#go").click(function(){
    $("input[name='correctAnswer']").each(function(){
      if($(this).val() !== "1"){
        $(this).prop("checked",false);
      }
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">

라디오 버튼 목록을 다루는 경우 : checked 선택기를 사용하여 원하는 것을 선택할 수 있습니다.

$("#go").click(function(){
  $("input[name='correctAnswer']:checked").prop("checked",false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="radio1" type="radio" name="correctAnswer" value="1">1</input>
<input id="radio2" type="radio" name="correctAnswer" value="2">2</input>
<input id="radio3" type="radio" name="correctAnswer" value="3">3</input>
<input id="radio4" type="radio" name="correctAnswer" value="4">4</input>
<input type="button" id="go" value="go">

0

jquery를 통해 확인 된 라디오 버튼 세트 :

<div id="somediv" >
 <input type="radio" name="enddate" value="1"  />
 <input type="radio" name="enddate" value="2"  />
 <input type="radio" name="enddate" value="3"  />
</div>

jquery 코드 :

$('div#somediv input:radio:nth(0)').attr("checked","checked");

0

DOM에서 모든 라디오 버튼을 지우려면 :

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


0
<div id="radio">
<input type="radio" id="radio1" name="radio"/><label for="radio1">Bar Chart</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Pie Chart</label>
<input type="radio" id="radio3" name="radio"/><label for="radio3">Datapoint Chart</label>
</div>

$('#radio input').removeAttr('checked');
// Refresh the jQuery UI buttonset.                  
$( "#radio" ).buttonset('refresh');

0

prop가 확인 된 상태를 변경했지만 change도 양식에 표시됩니다.

$('input[name="correctAnswer"]').prop('checked', false).change();

-1

당신이있는 곳 : <input type="radio" name="enddate" value="1" />

value = "1"뒤에 추가 할 수도 있습니다 unchecked =" false" />

그러면 줄은 다음과 같습니다.

<input type="radio" name="enddate" value="1" unchecked =" false" />

1
나는 당신이 당신의 대답을 불완전하게 두었다고 생각합니다.
Amar

-2

모든 라디오 버튼을 기본값으로 다시 설정하십시오.

$("input[name='correctAnswer']").checkboxradio( "refresh" );

checkboxradio () 함수는 jQuery 2.x에 정의되어 있지 않습니다. 이 확장이 사용하고 있습니까?
justdan23

-3

왜 안 해?

$("#radio1, #radio2, #radio3, #radio4").checked = false;

1
jQuery 호출에서 반환 된 배열에서 checked 속성을 설정할 수는 없으며 attr () 함수를 사용하여 배열의 항목에서 해당 속성을 설정해야합니다.
bdukes

이것은 '체크되지 않은'것이 아닙니다
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.