[jquery] jQuery로 다단계 양식 재설정

2012 년 3 월에 업데이트되었습니다.

그래서 원래이 질문에 답한 지 2 년이 지나서야 그것이 큰 혼란으로 바뀌 었다는 것을 알게되었습니다. 나는 그것이 되돌아온 시간에 관한 것이라고 생각하며, 가장 많이지지되고 받아 들여 졌기 때문에 대답을 진정으로 정확하게 만듭니다.

레코드의 경우 원래 포스터가 요청한 것이 아니기 때문에 Titi의 답변이 잘못되었습니다. native reset () 메소드를 사용하여 양식을 재설정 할 수는 있지만이 질문은 기억 된 양식을 지우려고합니다. 이 방법으로 재설정하면 양식에 남아있는 값입니다. 이것이 “수동”리셋이 필요한 이유입니다. 나는 대부분의 사람들이 Google 검색 에서이 질문에 도달했다고 생각하고 실제로 reset () 메소드를 찾고 있지만 OP가 이야기하는 특정 경우에는 작동하지 않습니다.

내 원래의 대답은 다음과 같습니다.

// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');

OP를 포함하여 많은 경우에 효과가 있지만 주석 및 기타 답변에서 지적한 것처럼 모든 값 속성에서 라디오 / 확인란 요소를 지 웁니다.

더 정확한 대답은 (완벽하지는 않음) 다음과 같습니다.

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

은 Using :text, :radio그들이으로 평가 결국 스스로에 의해 등 선택기하는 jQuery를하여 나쁜 사례로 간주되고 *:text는 더 이상은해야보다 오래 걸릴 수있다. 화이트리스트 방식을 선호하며 원래 답변에이 방식을 사용했으면합니다. 어쨌든 input선택기 의 일부와 양식 요소의 캐시를 지정하면 여기에서 최상의 성능을 발휘할 수 있습니다.

select 요소에 대한 사람들의 기본값이 빈 값을 갖는 옵션이 아닌 경우이 답변에는 여전히 약간의 결함이있을 수 있지만 얻을 수있는만큼 일반적이며 이것이 사례별로 처리되어야합니다 .

답변

$('#myform')[0].reset();

<input name="percent" value="50"/>

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

$('#my-form').clear();

$('#formDiv form').get(0).reset()

$('#formId').get(0).reset()