체크 박스 입력은 체크 된 경우에만 데이터를 게시합니까?

양식 제출시 확인란이 선택된 경우 브라우저가 확인란 입력 값 데이터 만 보내는 것이 표준 동작입니까?

값 데이터가 제공되지 않으면 기본값은 항상 "on"입니까?

위의 내용이 맞다고 가정하면, 모든 브라우저에서 일관된 동작입니까?

예, 표준 동작은 확인란이 선택된 경우에만 값이 전송됩니다. 이것은 일반적으로 모든 데이터가 양식에서 다시 나오는 것은 아니기 때문에 서버 측에서 어떤 확인란을 예상하는지 기억하는 방법이 필요하다는 것을 의미합니다.

기본값은 항상 "on"이며 이는 브라우저간에 일관성이 있어야합니다.

이것은 W3C HTML 4 권장 사항 에서 다룹니다 .

확인란 (및 라디오 버튼)은 사용자가 전환 할 수있는 켜기 / 끄기 스위치입니다. 제어 요소의 점검 속성이 설정되면 스위치가 "켜짐"입니다. 양식을 제출하면 "on"확인란 컨트롤 만 성공할 수 있습니다.

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있습니다.

확인란을 선택하지 않으면 양식 제출시 전송 된 데이터에 기여하지 않습니다.

HTML5 섹션 4.10.22.4 양식 데이터 세트 구성은 양식 데이터가 구성되는 방식을 설명합니다.

다음 조건 중 하나라도 충족되면이 요소에 대해 다음 하위 단계를 건너 뛰십시오. [...]

field 요소는 type 속성이 Checkbox 상태이고 checkness가 false 인 입력 요소입니다.

누락 된 on경우 기본값 이 지정됩니다 value.

그렇지 않으면, 필드 요소가 type 속성이 Checkbox 상태 또는 단일 선택 단추 상태 인 입력 요소 인 경우 다음과 같은 추가 하위 단계를 실행하십시오.

필드 요소에 value 속성이 지정되어 있으면 value를 해당 속성의 값으로 설정하십시오. 그렇지 않으면 value를 문자열 "on"으로 설정하십시오.

따라서 양식 데이터 생성 중에는 선택하지 않은 확인란을 건너 뜁니다.

HTML4 에서도 비슷한 동작이 필요합니다 . 모든 호환 브라우저에서이 동작을 예상하는 것이 합리적입니다.

확인란이 선택된 경우에만 확인란이 '켜짐'으로 표시됩니다. 체크 박스 값을 잡기 위해 숨겨진 입력을 사용할 수 있습니다

JS :

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

HTML :

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

양식 제출시 확인란이 선택된 경우 브라우저가 확인란 입력 값 데이터 만 보내는 것이 표준 동작입니까?

예, 그렇지 않으면 확인란이 실제로 선택되었는지 여부를 결정하는 확실한 방법이 없기 때문에 (값을 변경 한 경우 원하는 값이 선택되었을 때 원하는 값과 같을 때 사례가 존재할 수 있습니다) 로 교체).

값 데이터가 제공되지 않으면 기본값은 항상 "on"입니까?

다른 답변은 "on"이 기본값임을 확인합니다. 그러나 값에 관심이 없으면 다음을 사용하십시오.

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

거의 모든 브라우저에서 일관되어야하는 HTML 4 사양에서 :

http://www.w3.org/TR/html401/interact/forms.html#checkbox

확인란 (및 라디오 버튼)은 사용자가 전환 할 수있는 켜기 / 끄기 스위치입니다. 제어 요소의 점검 속성이 설정되면 스위치가 "켜짐"입니다. 양식을 제출하면 "on"확인란 컨트롤 만 성공할 수 있습니다.

성공은 다음과 같이 정의됩니다.

성공적인 제어는 제출에 "유효"합니다. 모든 성공적인 제어는 제출 된 양식 데이터 세트의 일부로 제어 이름과 현재 값이 쌍을 이룹니다. 성공적인 제어는 FORM 요소 내에 정의되어야하며 제어 이름이 있어야합니다.

입력 유형 = "숨김"name = "is_main"value = "0"

입력 유형 = "확인란"name = "is_main"value = "1"

응용 프로그램에서와 같이 이와 같이 제어 할 수 있습니다. 확인하면 값 1을 보내십시오. 그렇지 않으면 0

위의 답변 중 어느 것도 나를 만족시키지 못했습니다. 가장 좋은 해결책은 동일한 이름으로 각 확인란 입력 앞에 숨겨진 입력을 포함시키는 것 입니다.

<input type="hidden" name="foo[]" value="off"/>

<input type="checkbox" name="foo[]"/>

그런 다음 서버 측에서 작은 알고리즘을 사용하면 HTML이 제공하는 것과 같은 것을 얻을 수 있습니다.

function checkboxHack(array $checkbox_input): array
{
    $foo = [];
    foreach($checkbox_input as $value) {
        if($value === 'on') {
            array_pop($foo);
        }
        $foo[] = $value;
    }
    return $foo;
}

이것은 원시 입력이 될 것입니다

array (
    0 => 'off',
    1 => 'on',
    2 => 'off',
    3 => 'off',
    4 => 'on',
    5 => 'off',
    6 => 'on',
),

그리고 함수는

array (
    0 => 'on',
    1 => 'off',
    2 => 'on',
    3 => 'on',
)  

확인란을 동적으로 생성하는 페이지 (양식)가 있으므로 이러한 답변이 큰 도움이되었습니다. 내 솔루션은 여기의 많은 솔루션과 매우 유사하지만 구현하기 쉽다고 생각할 수는 없습니다.

먼저 숨겨진 입력 상자를 확인란과 일치시킵니다.

 <td><input class = "chkhide" type="hidden" name="delete_milestone[]" value="off"/><input type="checkbox" name="delete_milestone[]"   class="chk_milestone" ></td>

이제 모든 경우 checkboxes 선택하지 않으면 숨겨진 필드에서 반환 된 값이 모두 해제됩니다.

예를 들어, 여기에 동적으로 삽입 된 5 개의 확인란이있는 POSTS값은 다음과 같습니다.

  'delete_milestone' => 
array (size=7)
  0 => string 'off' (length=3)
  1 => string 'off' (length=3)
  2 => string 'off' (length=3)
  3 => string 'on' (length=2)
  4 => string 'off' (length=3)
  5 => string 'on' (length=2)
  6 => string 'off' (length=3)

이것은 세 번째와 네 번째 확인란 만 on또는checked .

본질적으로 더미 또는 숨겨진 입력 필드는 "켜짐" 이 없으면 모든 것이 꺼져 있음을 나타냅니다. 는 off 색인 아래에 나타내므로 클라이언트 측 코드 한 줄없이 필요한 색인을 제공합니다.

.

ASP.NET 변형과 마찬가지로 실제 이름 앞에 같은 이름을 가진 숨겨진 입력을 같은 이름으로 넣는 것을 제외하고. 마지막 값만 전송됩니다. 이 방법으로 상자를 선택하면 이름과 값 "on"이 전송되지만, 선택하지 않으면 해당 숨겨진 입력의 이름과 원하는 값이 전송됩니다. 결국 $ _POST 배열이 읽히고, 확인 된 및 확인되지 않은 모든 요소가 "on"및 "false"값으로 중복 키가 읽히지 않게됩니다. PHP에서 쉽게 처리 할 수 ​​있습니다.

양식 제출시 전송되지 않는 확인란을 선택하지 않은 것과 동일한 문제가 발생하여 확인란 항목을 미러링하는 것 이외의 다른 해결책을 찾았습니다.

확인되지 않은 모든 확인란을 사용하여 가져 오기

var checkboxQueryString;

$form.find ("input[type=\"checkbox\"]:not( \":checked\")" ).each(function( i, e ) {
  checkboxQueryString += "&" + $( e ).attr( "name" ) + "=N"
});

이 코드로 문제를 해결했습니다.

HTML 양식

<input type="checkbox" id="is-business" name="is-business" value="off" onclick="changeValueCheckbox(this)" >
<label for="is-business">Soy empresa</label>

확인란 값 형식을 변경하여 자바 스크립트 함수 :

//change value of checkbox element
function changeValueCheckbox(element){
   if(element.checked){
    element.value='on';
  }else{
    element.value='off';
  }
}

서버는 데이터 게시물이 "켜짐"또는 "꺼짐"인지 확인했습니다. 나는 playframework 자바를 사용했다.

        final Map<String, String[]> data = request().body().asFormUrlEncoded();

        if (data.get("is-business")[0].equals('on')) {
            login.setType(new MasterValue(Login.BUSINESS_TYPE));
        } else {
            login.setType(new MasterValue(Login.USER_TYPE));
        }