チェックボックス入力は、チェックされている場合にのみデータをポストしますか？

フォームの送信時にチェックされている場合、ブラウザのチェックボックスの入力値データのみを送信するのはブラウザの標準的な動作ですか？

また、値のデータが提供されない場合、デフォルト値は常に「オン」ですか？

上記が正しいと仮定すると、すべてのブラウザーでこの一貫した動作はありますか？

はい、標準の動作では、チェックボックスがオンの場合にのみ値が送信されます。これは通常、すべてのデータがフォームから返されるわけではないため、サーバー側で予期しているチェックボックスを覚えておく方法が必要であることを意味します。

デフォルト値は常に「オン」です。これは、ブラウザー間で一貫している必要があります。

これはW3C HTML 4勧告でカバーされています：

チェックボックス（およびラジオボタン）は、ユーザーが切り替えることができるオン/オフスイッチです。コントロール要素のchecked属性が設定されている場合、スイッチは「オン」です。フォームが送信されると、「オン」のチェックボックスコントロールのみが成功します。

HTMLでは、各<input />要素は単一の（ただし一意ではない）名前と値のペアに関連付けられています。このペアは、次のリクエスト（この場合はPOSTリクエスト本文）で送信されます。<input />が「成功」したます。

したがって、<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 同じ名前の2つの有効な入力があったため、2回送信されました。
• fourそれがなかったので、送信されcheckboxませんでしたchecked
• six属性が優先されるcheckedため、送信されませんでしたdisabled。
• sevenname=""送信された属性がないため、送信されません。

あなたの質問に関して：チェックされていないチェックボックスはその名前と値のペアがサーバーに送信されないことがわかります-しかし、同じ名前を共有する他の入力はそれと共に送信されます。

ASP.NET MVCのようなフレームワークは、次のようにcheckbox、すべての入力をhiddenレンダリングされたHTMLの入力と（密かに）ペアリングすることでこれに対処します。

@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状態で、checkednessがfalseであるinput要素です。

が見つからないon場合valueは、デフォルト値が指定されます。

それ以外の場合、field要素がtype属性がCheckbox状態またはRadio Button状態であるinput要素である場合は、さらにネストされた次のサブステップを実行します。

フィールド要素にvalue属性が指定されている場合、valueをその属性の値とします。それ以外の場合、値は文字列 "on"とします。

したがって、フォームデータの構築中は、チェックされていないチェックボックスはスキップされます。

HTML4でも同様の動作が必要です。すべての対応ブラウザからこの動作を期待するのは妥当です。

チェックボックスがチェックされている場合にのみ、チェックボックスは値「on」を投稿しています。隠し入力を使用できるチェックボックス値をキャッチすることを意図

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" />

フォームの送信時にチェックされている場合、ブラウザのチェックボックスの入力値データのみを送信するのはブラウザの標準的な動作ですか？

はい、そうでない場合、チェックボックスが実際にチェックされたかどうかを判断する確実な方法がないためです（値が変更された場合、チェックされた場合の目的の値がそれと同じになる場合があります。スワップ先）。

また、値のデータが提供されない場合、デフォルト値は常に「オン」ですか？

他の回答は、「オン」がデフォルトであることを確認しています。ただし、値に関心がない場合は、次のように使用します。

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

ほとんどすべてのブラウザで一貫しているはずのHTML 4仕様から：

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

チェックボックス（およびラジオボタン）は、ユーザーが切り替えることができるオン/オフスイッチです。コントロール要素のchecked属性が設定されている場合、スイッチは「オン」です。フォームが送信されると、「オン」のチェックボックスコントロールのみが成功します。

成功は次のように定義されます。

成功したコントロールは、送信に対して「有効」です。成功したすべてのコントロールには、送信されたフォームデータセットの一部として、そのコントロール名と現在の値がペアになっています。成功したコントロールはFORM要素内で定義され、コントロール名を持っている必要があります。

input type = "hidden" name = "is_main" value = "0"

input type = "checkbox" 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)

唯一の3番目と4番目のチェックボックスがあるこのショー onかchecked。

基本的に、ダミーまたは非表示の入力フィールドは、「オン」がない限り、すべてがオフであることを示します。、オフインデックスの下にであることを示します。これにより、クライアント側のコードを1行も使用せずに必要なインデックスを取得できます。

。

（同じ名前の）実際のチェックボックスの前に同じ名前の非表示の入力を置くことを除いて、ASP.NETバリアントと同じです。最後の値のみが送信されます。このように、ボックスがチェックされている場合は、その名前と値「オン」が送信されます。チェックされていない場合は、対応する非表示の入力の名前と任意の値を送信します。最後に、チェックされた要素とチェックされていない要素がすべて含まれた$ _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>

そして、チェックボックスの値のフォームを変更することにより、JavaScript関数：

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

サーバーはデータポストが「オン」か「オフ」かを確認しました。私はplayframework javaを使用しました

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