Apakah input kotak centang hanya mengirim data jika dicentang?

Apakah perilaku standar untuk browser hanya mengirim data nilai input kotak centang jika diperiksa pada pengiriman formulir?

Dan jika tidak ada data nilai yang diberikan, apakah nilai default selalu "menyala"?

Dengan anggapan hal di atas benar, apakah perilaku konsisten ini di semua browser?

Ya, perilaku standar adalah nilai hanya dikirim jika kotak centang dicentang. Ini biasanya berarti Anda harus memiliki cara mengingat kotak centang apa yang Anda harapkan di sisi server karena tidak semua data kembali dari formulir.

Nilai default selalu "aktif", ini harus konsisten di seluruh browser.

Ini tercakup dalam rekomendasi W3C HTML 4 :

Kotak centang (dan tombol radio) adalah sakelar hidup / mati yang dapat diaktifkan oleh pengguna. Sakelar "aktif" saat atribut yang dicentang elemen kontrol diatur. Saat formulir dikirimkan, hanya kontrol centang "on" yang bisa berhasil.

Dalam HTML, setiap <input />elemen dikaitkan dengan satu pasangan nama dan nilai (tetapi tidak unik). Pasangan ini dikirim dalam permintaan berikutnya (dalam hal ini, badan permintaan POST) hanya jika <input />"berhasil".

Jadi, jika Anda memiliki input ini di <form>DOM Anda :

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

Akan menghasilkan pasangan nama + nilai ini yang akan dikirimkan ke server:

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

Perhatikan itu:

• twodan sixdikeluarkan karena mereka memiliki disabledset atribut.
• three dikirim dua kali karena memiliki dua input yang valid dengan nama yang sama.
• fourtidak dikirim karena itu adalah checkboxyang tidakchecked
• sixtidak dikirim meskipun checkedkarena disabledatribut memiliki prioritas lebih tinggi.
• seventidak memiliki name=""pengirimannya atribut, sehingga tidak disampaikan.

Sehubungan dengan pertanyaan Anda: Anda dapat melihat bahwa kotak centang yang tidak dicentang tidak akan mengirim pasangan nama + nilainya ke server - tetapi input lain yang memiliki nama yang sama akan dikirimkan bersamanya.

Kerangka kerja seperti ASP.NET MVC mengatasi ini dengan (diam-diam) memasangkan setiap checkboxinput dengan hiddeninput dalam HTML yang diberikan, seperti:

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

Memberikan:

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

Jika pengguna tidak mencentang kotak centang, maka yang berikut akan dikirim ke server:

SomeBooleanProperty=false

Jika pengguna mencentang kotak centang, maka keduanya akan dikirim:

SomeBooleanProperty=true
SomeBooleanProperty=false

Tetapi server akan mengabaikan =falseversi karena melihat =trueversi, dan jadi jika tidak melihat =trueitu dapat menentukan bahwa kotak centang diberikan dan bahwa pengguna tidak memeriksanya - sebagai lawan dari SomeBooleanPropertyinput yang tidak diberikan sama sekali.

Jika kotak centang tidak dicentang maka itu tidak berkontribusi pada data yang dikirim pada pengiriman formulir.

HTML5 bagian 4.10.22.4 Membuat kumpulan data formulir menjelaskan cara pembuatan data formulir:

Jika salah satu dari kondisi berikut ini terpenuhi, maka lewati subteps ini untuk elemen ini: [...]

Elemen bidang adalah elemen input yang atribut tipenya dalam keadaan kotak centang dan yang ketelitiannya salah.

dan kemudian nilai default onditentukan jika valuetidak ada:

Jika tidak, jika elemen bidang adalah elemen input yang atribut tipenya dalam kondisi Kotak centang atau status Tombol Radio, kemudian jalankan subteps bersarang lebih lanjut ini:

Jika elemen bidang memiliki atribut nilai yang ditentukan, maka biarkan nilai menjadi nilai atribut itu; jika tidak, biarkan nilai menjadi string "on".

Dengan demikian kotak centang yang tidak dicentang dilewati selama konstruksi data formulir.

Perilaku serupa diperlukan di bawah HTML4 . Masuk akal untuk mengharapkan perilaku ini dari semua browser yang sesuai.

Kotak centang memposting nilai 'on' jika dan hanya jika kotak centang dicentang. Insted dari menangkap nilai kotak centang Anda dapat menggunakan input tersembunyi

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

Apakah perilaku standar untuk browser hanya mengirim data nilai input kotak centang jika diperiksa pada pengiriman formulir?

Ya, karena jika tidak maka tidak akan ada cara yang solid untuk menentukan apakah kotak centang itu benar-benar dicentang atau tidak (jika itu mengubah nilainya, kasing mungkin ada ketika nilai yang Anda inginkan jika dicentang akan sama dengan yang ada saat itu. ditukar ke).

Dan jika tidak ada data nilai yang diberikan, apakah nilai default selalu "menyala"?

Jawaban lain mengonfirmasi bahwa "aktif" adalah default. Namun, jika Anda tidak tertarik dengan nilainya, cukup gunakan:

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

Dari HTML 4 spec, yang harus konsisten di hampir semua browser:

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

Kotak centang (dan tombol radio) adalah sakelar hidup / mati yang dapat diaktifkan oleh pengguna. Sakelar "aktif" saat atribut yang dicentang elemen kontrol diatur. Saat formulir dikirimkan, hanya kontrol centang "on" yang bisa berhasil.

Berhasil didefinisikan sebagai berikut:

Kontrol yang berhasil adalah "valid" untuk pengiriman. Setiap kontrol yang berhasil memiliki nama kontrolnya dipasangkan dengan nilainya saat ini sebagai bagian dari kumpulan data formulir yang dikirimkan. Kontrol yang berhasil harus didefinisikan dalam elemen FORMULIR dan harus memiliki nama kontrol.

tipe input = "tersembunyi" name = "is_main" value = "0"

tipe input = "kotak centang" name = "is_main" value = "1"

sehingga Anda dapat mengontrol seperti ini seperti yang saya lakukan dalam aplikasi. jika memeriksa maka kirim nilai 1 jika tidak 0

Tidak ada jawaban di atas yang memuaskan saya. Saya menemukan solusi terbaik adalah dengan memasukkan input tersembunyi sebelum setiap input kotak centang dengan nama yang sama.

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

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

Kemudian di sisi server, menggunakan sedikit algoritma Anda bisa mendapatkan sesuatu yang lebih seperti HTML harus menyediakan.

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

Ini akan menjadi input mentah

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

Dan fungsinya akan kembali

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

Saya memiliki halaman (formulir) yang secara dinamis menghasilkan kotak centang sehingga jawaban ini sangat membantu. Solusi saya sangat mirip dengan banyak orang di sini tetapi saya tidak dapat berpikir bahwa ini lebih mudah untuk diterapkan.

Pertama saya meletakkan kotak input tersembunyi sesuai dengan kotak centang saya, yaitu

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

Sekarang jika semua checkboxestidak dipilih maka nilai yang dikembalikan oleh bidang tersembunyi semua akan mati.

Misalnya, di sini dengan lima kotak centang yang disisipkan secara dinamis, bentuk POSTSnilai-nilai berikut:

  '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)

Ini menunjukkan bahwa hanya kotak centang 3 dan 4 yang onatau checked.

Pada dasarnya, dummy atau field input tersembunyi hanya menunjukkan bahwa semuanya tidak aktif kecuali ada "on" di bawah indeks off, yang kemudian memberi Anda indeks yang Anda butuhkan tanpa satu baris kode sisi klien.

.

Sama seperti varian ASP.NET, kecuali letakkan input tersembunyi dengan nama yang sama sebelum kotak centang yang sebenarnya (dengan nama yang sama). Hanya nilai terakhir yang akan dikirim. Dengan cara ini jika kotak dicentang maka nama dan nilai "on" dikirim, sedangkan jika tidak dicentang maka nama input tersembunyi terkait dan nilai apa pun yang Anda ingin berikan akan dikirim. Pada akhirnya Anda akan mendapatkan array $ _POST untuk dibaca, dengan semua elemen yang dicentang dan tidak dicentang di dalamnya, nilai "on" dan "false", tanpa kunci duplikat. Mudah diproses dalam PHP.

Memiliki masalah yang sama dengan kotak centang yang tidak dicentang yang tidak akan dikirim pada formulir kirim, saya keluar dengan solusi lain daripada mirror item kotak centang.

Dapatkan semua kotak centang yang tidak dicentang dengan

var checkboxQueryString;

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

Saya menyelesaikan masalah dengan kode ini:

Formulir HTML

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

dan fungsi javascript dengan mengubah bentuk nilai kotak centang:

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

dan server memeriksa apakah posting data "on" atau "off". Saya menggunakan java 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));
        }