207

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

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

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

4

12 に答える 12

212

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

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

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

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

于 2012-07-11T00:55:54.127 に答える
105

HTML では、各<input />要素は 1 つの (ただし一意ではない) 名前と値のペアに関連付けられています。<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は、同じ名前の有効な入力が 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。

于 2012-07-11T00:55:57.500 に答える
16

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

HTML5 セクション4.10.22.4 フォーム データ セットの構築では、フォーム データの構築方法について説明しています。

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

field 要素は、type 属性が Checkbox 状態で、checkedness が false である input 要素です。

が欠落している場合は、デフォルト値onが指定されます。value

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

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

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

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

于 2012-07-11T01:03:55.820 に答える
11

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

そうしないと、チェックボックスが実際にチェックされているかどうかを判断する確実な方法がないためです (値が変更された場合、チェックされている場合の目的の値が元の値と同じになる場合があります)。に交換しました）。

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

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

if (isset($_POST['the_checkbox'])){
    // name="the_checkbox" is checked
}
于 2012-07-11T00:55:39.567 に答える
7

ほぼすべてのブラウザーで一貫しているはずの HTML 4 仕様から:

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

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

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

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

于 2012-07-11T00:56:24.747 に答える
0

フォームの送信時に送信されない未チェックのチェックボックスで同じ問題が発生したため、チェックボックスの項目をミラーリングする以外の別の解決策を思い付きました。

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

var checkboxQueryString;

$form.find ("input[type=\"checkbox\"]:not( \":checked\")" ).each(function( i, e ) {
  checkboxQueryString += "&" + $( e ).attr( "name" ) + "=N"
});
于 2016-12-12T19:14:30.010 に答える
-2

このコードで問題を解決しました：

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));
        }
于 2015-03-01T15:54:09.550 に答える