HTML에서 각 <input />요소는 하나의 고유하지 않은 단일 이름 및 값 쌍과 연결됩니다. 이 쌍은 <input />“성공”인 경우에만 후속 요청 (이 경우 POST 요청 본문)으로 전송됩니다 .

따라서 <form>DOM에 이러한 입력이 있으면

<input type="text"     name="one"   value="foo"                        />
<input type="text"     name="two"   value="bar"    disabled="disabled" />
<input type="text"     name="three" value="first"                      />
<input type="text"     name="three" value="second"                     />

<input type="checkbox" name="four"  value="baz"                        />
<input type="checkbox" name="five"  value="baz"    checked="checked"   />
<input type="checkbox" name="six"   value="qux"    checked="checked" disabled="disabled" />
<input type="checkbox" name=""      value="seven"  checked="checked"   />

<input type="radio"    name="eight" value="corge"                      />
<input type="radio"    name="eight" value="grault" checked="checked"   />
<input type="radio"    name="eight" value="garply"                     />

이 이름과 값 쌍을 생성하여 서버에 제출합니다.

one=foo
three=first
three=second
five=baz
eight=grault

그것을주의해라:

• two그리고 six그들이 있었기 때문에 제외되었다disabled 속성 세트를.
• three 동일한 이름을 가진 두 개의 유효한 입력이 있었기 때문에 두 번 전송되었습니다.
• four그렇지 않았기 때문에 전송 checkbox되지 않았습니다checked
• sixchecked있기 때문에 전송되지 않았습니다disabled 속성이 더 높은 우선 순위를 가지고있다.
• sevenname=""전송 된 속성이 없으므로 제출되지 않습니다.

귀하의 질문과 관련하여 : 선택하지 않은 확인란은 이름 + 값 쌍이 서버로 전송되지 않지만 동일한 이름을 공유하는 다른 입력이 함께 전송됨을 알 수 있습니다.

ASP.NET MVC와 같은 프레임 워크는 다음과 같이 렌더링 된 HTML의 checkbox입력과 모든 입력을 (확실히) 페어링하여이 문제를 해결합니다 hidden.

@Html.CheckBoxFor( m => m.SomeBooleanProperty )

렌더 :

<input type="checkbox" name="SomeBooleanProperty" value="true" />
<input type="hidden"   name="SomeBooleanProperty" value="false" />

사용자가 확인란을 선택하지 않으면 다음이 서버로 전송됩니다.

SomeBooleanProperty=false

사용자가 확인란을 선택하면 둘 다 전송됩니다.

SomeBooleanProperty=true
SomeBooleanProperty=false

그러나 서버는 =false버전을 확인하기 때문에 버전 을 무시 =true하므로 확인되지 않으면 입력이 전혀 렌더링되지 않는 =true것과 달리 확인란이 렌더링되고 사용자가 확인하지 않았 음을 확인할 수 SomeBooleanProperty있습니다.

답변

var chk = $('input[type="checkbox"]');
    chk.each(function(){
        var v = $(this).attr('checked') == 'checked'?1:0;
        $(this).after('<input type="hidden" name="'+$(this).attr('rel')+'" value="'+v+'" />');
    });

chk.change(function(){
        var v = $(this).is(':checked')?1:0;
        $(this).next('input[type="hidden"]').val(v);
    });

<label>Active</label><input rel="active" type="checkbox" />

if (isset($_POST['the_checkbox'])){
    // name="the_checkbox" is checked
}