web-dev-qa-db-ja.com

<input type = "checkbox" />はチェックされている場合にのみデータを投稿しますか？

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

値データが提供されていない場合、デフォルト値は常に "on"ですか？

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

htmlinputcheckbox
161
Mark

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

デフォルト値は常に "on"です。これはブラウザ間で一貫しているはずです。

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

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

165
John C

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属性が設定されているため除外されました。
  • 同じ名前の有効な入力が2つあったため、threeが2回送信されました。
  • fourはcheckboxではないcheckedであるため送信されませんでした
  • six属性の優先順位が高いため、checkedにもかかわらず、disabledは送信されませんでした。
  • sevenにはname=""属性が送信されていないため、送信されません。

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

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バージョンが表示されない場合、チェックボックスがレンダリングされ、ユーザーがチェックしなかったと判断できますit-SomeBooleanProperty入力がまったくレンダリングされないのに対して。

70
Dai

チェックボックスがチェックされていない場合は、フォーム送信時に送信されたデータには寄与しません。

HTML5セクション 4.10.22.4フォームデータセットの作成 フォームデータの作成方法を説明します。

次の条件のいずれかが満たされている場合は、この要素についてこれらのサブステップをスキップしてください。[...]

Field要素は、type属性がCheckbox状態にあり、checkednessがfalseである入力要素です。

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

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

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

このように、チェックされていないチェックボックスはフォームデータ構築中にスキップされます。

HTML4 の下でも同様の動作が必要です。これは、準拠しているすべてのブラウザからこの動作を期待することが合理的です。

15
Adam Zalcman

チェックボックスがチェックされている場合に限り、チェックボックスは値 '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" />
9
Lanister

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

そうでなければ、チェックボックスが実際にチェックされたかどうかを判断する確実な方法がないので（値が変更された場合、チェックされた場合の希望の値がチェックされた値と同じ場合に交換）。

値データが提供されていない場合、デフォルト値は常に "on"ですか？

他の回答では、 "on"がデフォルトであることを確認しています。ただし、値に興味がない場合は、次のようにしてください。

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

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

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

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

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

成功したコントロールは送信に対して "有効"です。コントロールが成功するたびに、送信されたフォームデータセットの一部として、コントロール名と現在の値がペアになります。成功したコントロールはFORM要素内で定義され、コントロール名を持たなければなりません。

7
Alex W

入力タイプ= "隠し" name = "is_main"値= "0"

入力タイプ= "チェックボックス"名前= "is_main"値= "1"

だから私はアプリケーションでやったようにあなたはこのように制御することができます。チェックした場合は値1、それ以外の場合は0を送信

4
Muhammad Amir Shahzad

上記の答えのどれも私を満足させませんでした。私は最善の解決策は隠された入力を含めることです---同じ名前を持つ各チェックボックス入力before。

<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',
)
3
Cobolt

チェックボックスを動的に生成するページ（フォーム）があるので、これらの回答は非常に役立ちました。私の解決策はここの多くのものと非常に似ていますが、私はそれが実行するのがより簡単であると考えるのを助けることができません。

まず私のチェックボックスに合わせて隠し入力ボックスを配置します。

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

すべてのcheckboxesが選択されていない場合、hiddenフィールドによって返される値はすべてoffになります。

たとえば、ここに動的に挿入された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であることを示しています。

基本的に、ダミーまたは非表示の入力フィールドは、offインデックスの下に"on"がない限り、すべてがオフであることを示しています。

。

1
Alexander

ASP.NETの変種と同じですが、実際のチェックボックスの前に（同じ名前の）隠し入力を同じ名前で入れます。最後の値だけが送信されます。このようにしてボックスがチェックされるとその名前と値 "on"が送信され、チェックされていない場合は対応する隠し入力の名前とあなたがそれに与えたい値を送信します。最後に、$ _POST配列に、チェックされている要素とチェックされていない要素がすべて含まれ、 "on"と "false"の値、重複するキーは含まれません。 PHPで簡単に処理できます。

0
user3124825

フォームの送信時に送信されない未チェックのチェックボックスについても同じ問題を抱えているので、チェックボックスの項目をミラー化する以外の解決策を考え出しました。

チェックされていないチェックボックスをすべて取得する

var checkboxQueryString;

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