POST kotak centang HTML tidak dicentang


303

Saya punya banyak kotak centang yang dicentang secara default. Pengguna saya mungkin akan menghapus centang pada beberapa (jika ada) dari kotak centang dan membiarkan sisanya dicentang.

Apakah ada cara untuk membuat bentuk POST kotak centang yang tidak diperiksa, daripada orang-orang yang sedang diperiksa?

Jawaban:


217

Tambahkan input tersembunyi untuk kotak centang dengan ID yang berbeda:

<input id='testName' type='checkbox' value='Yes' name='testName'>
<input id='testNameHidden' type='hidden' value='No' name='testName'>

Sebelum mengirimkan formulir, nonaktifkan input tersembunyi berdasarkan kondisi yang diperiksa:

if(document.getElementById("testName").checked) {
    document.getElementById('testNameHidden').disabled = true;
}

58
Jika Anda menggunakan solusi berbasis markup seperti ini, mungkin lebih baik untuk meletakkan input tersembunyi terlebih dahulu, dibandingkan banyak jawaban lainnya. Jika Anda menggunakan PHP, Anda dapat menghapus ketergantungan javascript, karena hanya nilai terakhir yang digunakan.
Ben

12
gamov, Anda salah, label dilampirkan pada input berdasarkan atribut id, bukan atribut nama input
Justin Emery

14
Sulit dipercaya penulis mendesainnya dengan cara ini. Mengapa tidak mengirim semua bidang input dengan beberapa nilai default untuk yang tidak dicentang :( Ini akan menjadi solusi yang lebih jelas daripada harus mengimplementasikan beberapa bidang "hack" tersembunyi. Pasti sudah jelas bahwa itu akan diperlukan dan mereka harus lihat itu sebelumnya
Srneczek

34
Ini terasa sangat berantakan.
EralpB

65
Apakah saya satu-satunya yang berpikir bahwa desain checkboxelemen yang mendasarinya mengerikan? Mereka kontrol biner, mereka harus mengirim nilai biner.
alexw

474

Solusi yang paling saya sukai sejauh ini adalah dengan memasukkan input tersembunyi dengan nama yang sama dengan kotak centang yang mungkin tidak dicentang. Saya pikir itu berfungsi sehingga jika kotak centang tidak dicentang, input tersembunyi masih berhasil dan dikirim ke server tetapi jika kotak centang dicentang akan menimpa input tersembunyi sebelum itu. Dengan cara ini Anda tidak perlu melacak nilai mana dalam data yang diposkan yang diharapkan berasal dari kotak centang.

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

3
Sekarang setelah saya membaca kembali pertanyaannya, sepertinya ini bukan yang Anda inginkan. Namun saya sampai pada pertanyaan ini ketika saya mencoba mencari tahu jawaban ini jadi mungkin itu bisa bermanfaat bagi orang lain.
Sam

2
.NET berbeda, alih-alih lihat stackoverflow.com/questions/7600817/…
KCD

121
Perlu dicatat bahwa jika Anda menandai kotak, browser akan mengirimkan nilai-nilai yang disembunyikan dan kotak centang. Solusi ini kemudian bergantung pada penanganan server terhadap variabel post dengan 2 nilai ini. Jika hanya mengambil nilai terakhir (misalnya PHP), kode Anda akan berfungsi seperti yang diharapkan. Namun, beberapa server menangani ini secara berbeda, Beberapa memilih nilai pertama, sementara yang lain menempatkan kedua nilai dalam daftar / array.
Michael Ekoka

1
Jawaban ini dibangun berdasarkan asumsi bahwa Anda dapat menyampaikan hanya satu dari dua input dengan nama yang sama yang akan dikirim ke server - Saya tidak mengerti mengapa ini menerima begitu banyak suara?
Muleskinner

7
@ Sam tidak tahu dari mana Anda mendapatkan ide itu? Ketika dua atau lebih kontrol diberi nama yang sama maka keduanya akan dikirim ke server saat pengiriman (untuk kotak centang, namun hanya jika dicentang) - bagaimana penanganannya di server tergantung pada implementasi sisi server. Jika Anda tidak percaya kepada saya, Anda dapat melihatnya sendiri dengan memonitor lalu lintas menggunakan alat seperti fiddler.
Muleskinner

75

Saya menyelesaikannya dengan menggunakan vanilla JavaScript:

<input type="hidden" name="checkboxName" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">

Hati-hati jangan sampai ada spasi atau garis pemisah di antara dua elemen input ini!

Kamu bisa memakai this.previousSibling.previousSibling untuk mendapatkan elemen "atas".

Dengan PHP Anda dapat memeriksa bidang tersembunyi bernama untuk 0 (tidak disetel) atau 1 (set).


Mengapa Anda tidak dapat memiliki spasi atau pemisah garis antara kedua elemen?
Michael Potter

@MichaelPotter: this.previousSibling akan mendapatkan spasi putih sebagai saudara kandung, jadi tidak berfungsi.
Marcel Ennix

4
Oh, ini SEMPURNA! Ini memecahkan masalah memposting beberapa bidang dengan duplikat nama bidang di sana. Tidak ada solusi lain yang melakukannya. Menggunakan metode Marcel, bidang yang Anda posting akan memiliki panjang array yang sama. Jadi skenario ini: <fieldset name='fs1'> <input type="text" name="somefield[]"> <input type="checkbox" name="live[]"> </fieldset> <fieldset name='fs2'> <input type="text" name="somefield[]"> <input type="checkbox" name="live[]"> </fieldset>* Asumsikan ada baris baru di sana. Mereka tampaknya tidak bekerja di blok kode mini-markup
Brian Layman

1
Ini harus menjadi jawaban yang diterima. Ini bekerja dengan array (ex / name = "soup []")
jdavid05

2
Anda bisa menggunakan previousElementSiblingbukan previousSibling. Ini didukung hampir di mana-mana , dan mengabaikan node teks.
MarSoft

23

Favorit pribadi saya adalah menambahkan bidang tersembunyi dengan nama yang sama yang akan digunakan jika kotak centang tidak dicentang. Tetapi solusinya tidak semudah kelihatannya.

Jika Anda menambahkan kode ini:

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

Peramban tidak akan terlalu peduli dengan apa yang Anda lakukan di sini. Browser akan mengirim kedua parameter ke server, dan server harus memutuskan apa yang harus dilakukan dengan mereka.

PHP misalnya mengambil nilai terakhir sebagai yang akan digunakan (lihat: Posisi otoritatif dari duplikat kunci permintaan HTTP GET )

Tetapi sistem lain yang bekerja dengan saya (berdasarkan Java) melakukannya dengan cara lain - mereka hanya memberi Anda nilai pertama. .NET sebagai gantinya akan memberi Anda array dengan kedua elemen sebagai gantinya

Saya akan mencoba menguji ini dengan node.js, Python dan Perl kapan-kapan.


2
ruby dan node.js akan mengambil nilai terakhir dari setiap bidang formulir yang digandakan. Metode pembantu Ruby on Rails membangun kotak centang dengan cara ini untuk alasan ini.
nzifnab

7
Untuk mengatasinya - ini didasarkan pada serangan yang disebut HTTP Parameter Pollution dan telah dianalisis oleh OWASP: owasp.org/images/b/ba/AppsecEU09_CarettoniDiPaola_v0.8.pdf (halaman 9) di mana Anda dapat menemukan daftar 20 sistem sistem dan lihat bagaimana mereka mengatasinya.
SimonSimCity

1
Java Servlets memberi Anda semua, selama Anda meneleponrequest.getParameterValues
mauhiz

20

Teknik umum untuk ini adalah membawa variabel tersembunyi bersama dengan masing-masing kotak centang.

<input type="checkbox" name="mycheckbox" />
<input type="hidden" name="mycheckbox.hidden"/>

Di sisi server, pertama-tama kami mendeteksi daftar variabel tersembunyi dan untuk setiap variabel tersembunyi, kami mencoba untuk melihat apakah entri kotak centang yang sesuai dikirimkan dalam formulir data atau tidak.

Algoritma sisi server mungkin akan terlihat seperti:

for input in form data such that input.name endswith .hidden
  checkboxName = input.name.rstrip('.hidden')
  if chceckbName is not in form, user has unchecked this checkbox

Di atas tidak persis menjawab pertanyaan, tetapi menyediakan cara alternatif untuk mencapai fungsi serupa.


20

Anda tidak perlu membuat bidang tersembunyi untuk semua kotak centang, cukup salin kode saya. itu akan mengubah nilai kotak centang jika tidak dicentang valueakan menetapkan 0dan jika kotak centang dicentang kemudian menetapkan valueke1

$("form").submit(function () {

    var this_master = $(this);

    this_master.find('input[type="checkbox"]').each( function () {
        var checkbox_this = $(this);


        if( checkbox_this.is(":checked") == true ) {
            checkbox_this.attr('value','1');
        } else {
            checkbox_this.prop('checked',true);
            //DONT' ITS JUST CHECK THE CHECKBOX TO SUBMIT FORM DATA    
            checkbox_this.attr('value','0');
        }
    })
})

1
Solusi ini berfungsi dengan baik dan lebih elegan daripada mencemari Dom dengan bidang tersembunyi.
Prasad Paranjape

9
Ini menyebabkan kotak untuk diperiksa sementara saat formulir dikirimkan. Ini membingungkan (paling-paling) bagi pengguna.
Mark Fraser

12
$('input[type=checkbox]').on("change",function(){
    var target = $(this).parent().find('input[type=hidden]').val();
    if(target == 0)
    {
        target = 1;
    }
    else
    {
        target = 0;
    }
    $(this).parent().find('input[type=hidden]').val(target);
});

<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>

Jika Anda meninggalkan nama kotak centang itu tidak lulus. Hanya array test_checkbox.


1
Solusi yang sangat hebat, tetapi dalam kasus saya live () tidak berfungsi, jadi saya menggunakan metode (): $ ('input [type = checkbox]'). On ("ubah", fungsi () {...}) ;
Massa

4
LIVE sudah usang. Jangan menggunakannya pada jawaban di stackoverflow lagi. Amem.
Ismael

Jawaban ini benar-benar yang terbaik .. Ini berfungsi seperti yang diharapkan. Bahkan untuk kotak centang grup.
Alemoh Rapheal Baja

11

Anda dapat melakukan beberapa Javascript di acara pengiriman formulir. Hanya itu yang bisa Anda lakukan, tidak ada cara untuk membuat browser melakukan ini sendiri. Ini juga berarti formulir Anda akan rusak untuk pengguna tanpa Javascript. Lebih baik untuk mengetahui di server yang ada kotak centang, sehingga Anda dapat menyimpulkan bahwa mereka yang absen dari nilai formulir yang diposting ( $_POSTdalam PHP) tidak dicentang.


2
sejak php 4.1 Anda juga dapat menggunakan $ _REQUEST php.net/manual/en/reserved.variables.request.php
Karl Adler

$_REQUESTadalah praktik yang baik karena memungkinkan beberapa kode digunakan kembali jika skrip Anda mendukung kedua metode.
nullability

9

Saya sebenarnya akan melakukan hal berikut.

Memiliki bidang input tersembunyi saya dengan nama yang sama dengan input kotak centang

<input type="hidden" name="checkbox_name[]" value="0" />
<input type="checkbox" name="checkbox_name[]" value="1" />

dan kemudian ketika saya memposting saya pertama-tama menghapus nilai duplikat yang diambil dalam array $ _POST, pilih yang menampilkan masing-masing nilai unik.

  $posted = array_unique($_POST['checkbox_name']);
  foreach($posted as $value){
    print $value;
  }

Saya mendapatkan ini dari sebuah postingan menghapus nilai duplikat dari array


Apa tujuan dari [] pada nilai bidang nama?
Michael Potter

@MichaelPotter Begitulah ketika posting dikirim ke PHP, ia akan membaca nama `checkbox_name []
Twister1002

@ Twister1002, saya pikir Anda menggambarkan tujuan atribut nama, bukan tujuan menambahkan [] pada nama. Saya melakukan pencarian di web dan tampaknya beberapa orang melakukan ini dengan nama: groupname [elementname] untuk mengelompokkan bidang bersama, tetapi saya tidak menemukan penjelasan untuk kosong [].
Michael Potter

1
@MichaelPotter Maaf, saya pikir saya sudah menyelesaikan pernyataan itu. Tapi ternyata tidak. Biarkan saya mengulanginya. Ketika dikirim ke php, prosesor PHP akan membacanya sebagai array. Jadi dengan setiap nama checkbox_name[]setiap nilai akan dimasukkan ke dalam array, yang kemudian dapat Anda tarik. Mis: $_POST['checkbox_name'][0]dan seterusnya dengan penambahan berapa banyak bidang yang memiliki nama yang sama. Contoh lain adalah jika Anda memiliki tiga bidang bernama field_name[]Anda bisa mendapatkan nilai field_namesuka yang kedua $_POST['field_name'][1]. Tujuannya bisa luar biasa jika Anda memiliki beberapa bidang dengan nama yang sama.
Twister1002

8

"Saya telah pergi dengan pendekatan server. Tampaknya bekerja dengan baik - terima kasih. - reach4thelasers. Seperti dikutip: solusi javascript tergantung pada bagaimana server handler (saya tidak memeriksanya)

seperti

if(!isset($_POST["checkbox"]) or empty($_POST["checkbox"])) $_POST["checkbox"]="something";

8

Saya tahu pertanyaan ini berumur 3 tahun tetapi saya menemukan solusi yang menurut saya cukup baik.

Anda dapat melakukan pemeriksaan apakah variabel $ _POST ditetapkan dan menyimpannya dalam variabel.

$value = isset($_POST['checkboxname'] ? 'YES' : 'NO';

fungsi isset () memeriksa apakah variabel $ _POST diberikan. Secara logika jika tidak ditetapkan maka kotak centang tidak dicentang.


Ini jauh lebih baik, karena respons paling populer adalah solusi buruk bagi pembaca layar.
Kevin Waterson

7

Sebagian besar jawaban di sini membutuhkan penggunaan JavaScript atau kontrol input rangkap. Kadang-kadang ini perlu ditangani sepenuhnya di sisi server.

Saya percaya kunci (yang dimaksudkan) untuk memecahkan masalah umum ini adalah kontrol input pengiriman formulir.

Untuk menafsirkan dan menangani nilai yang tidak dicentang untuk kotak centang berhasil, Anda harus memiliki pengetahuan tentang hal berikut:

  1. Nama-nama kotak centang
  2. Nama elemen input pengiriman formulir

Dengan memeriksa apakah formulir dikirimkan (nilai diberikan ke elemen input pengiriman), nilai kotak centang yang tidak dicentang dapat diasumsikan .

Sebagai contoh:

<form name="form" method="post">
  <input name="value1" type="checkbox" value="1">Checkbox One<br/>
  <input name="value2" type="checkbox" value="1" checked="checked">Checkbox Two<br/>
  <input name="value3" type="checkbox" value="1">Checkbox Three<br/>
  <input name="submit" type="submit" value="Submit">
</form>

Saat menggunakan PHP, cukup sepele untuk mendeteksi kotak centang mana yang dicentang.

<?php

$checkboxNames = array('value1', 'value2', 'value3');

// Persisted (previous) checkbox state may be loaded 
// from storage, such as the user's session or a database.
$checkboxesThatAreChecked = array(); 

// Only process if the form was actually submitted.
// This provides an opportunity to update the user's 
// session data, or to persist the new state of the data.

if (!empty($_POST['submit'])) {
    foreach ($checkboxNames as $checkboxName) {
        if (!empty($_POST[$checkboxName])) {
            $checkboxesThatAreChecked[] = $checkboxName;
        }
    }
    // The new state of the checkboxes can be persisted 
    // in session or database by inspecting the values 
    // in $checkboxesThatAreChecked.
    print_r($checkboxesThatAreChecked);
}

?>

Data awal dapat dimuat pada setiap pemuatan halaman, tetapi harus dimodifikasi hanya jika formulir dikirimkan. Karena nama-nama kotak centang sudah diketahui sebelumnya, mereka dapat dilalui dan diperiksa secara individual, sehingga tidak adanya nilai-nilai individualnya menunjukkan bahwa mereka tidak dicentang.


6

Saya sudah mencoba versi Sam dulu. Ide bagus, tetapi menyebabkan ada beberapa elemen dalam bentuk dengan nama yang sama. Jika Anda menggunakan javascript apa pun yang menemukan elemen berdasarkan nama, itu sekarang akan mengembalikan array elemen.

Saya telah mengerjakan ide Shailesh dalam PHP, itu berhasil untuk saya. Ini kode saya:

/ * Hapus bidang '.hidden' jika dokumen asli ada, gunakan nilai '.hidden' jika tidak. * /
foreach ($ _POST ['frmmain'] sebagai $ field_name => $ value)
{
    // Hanya lihat elemen yang diakhiri dengan '.hidden'
    if (! substr ($ field_name, -strlen ('. hidden'))) {
        istirahat;
    }

    // dapatkan namanya tanpa '.hidden'
    $ real_name = substr ($ key, strlen ($ field_name) - strlen ('. hidden'));

    // Buat bidang asli 'palsu' dengan nilai dalam '.hidden' jika dokumen asli tidak ada
    if (! array_key_exists ($ real_name, $ POST_copy)) {
        $ _POST [$ real_name] = $ value;
    }

    // Hapus elemen '.hidden'
    tidak disetel ($ _ POST [$ field_name]);
}

6

Saya juga suka solusi yang baru saja Anda posting kolom input tambahan, menggunakan JavaScript sepertinya sedikit membingungkan bagi saya.

Tergantung pada apa yang Anda gunakan untuk backend Anda akan tergantung pada input mana yang lebih dulu.

Untuk server backend tempat kejadian pertama kali digunakan (JSP) Anda harus melakukan hal berikut.

  <input type="checkbox" value="1" name="checkbox_1"/>
  <input type="hidden" value="0" name="checkbox_1"/>


Untuk server backend tempat kejadian terakhir digunakan (PHP, Rails) Anda harus melakukan hal berikut.

  <input type="hidden" value="0" name="checkbox_1"/>
  <input type="checkbox" value="1" name="checkbox_1"/>


Untuk server backend tempat semua kejadian disimpan dalam daftar tipe data ( [], array). (Python / Zope)

Anda dapat memposting sesuai pesanan yang Anda suka, Anda hanya perlu mencoba untuk mendapatkan nilai dari input dengan checkboxatribut type. Jadi indeks pertama dari daftar jika kotak centang sebelum elemen tersembunyi dan indeks terakhir jika kotak centang setelah elemen tersembunyi.


Untuk server backend di mana semua kejadian disatukan dengan koma (ASP.NET / IIS) Anda akan perlu (split / meledak) string dengan menggunakan koma sebagai pembatas untuk membuat tipe data daftar. ( [])

Sekarang Anda dapat mencoba untuk mengambil indeks pertama dari daftar jika kotak centang sebelum elemen tersembunyi dan ambil indeks terakhir jika kotak centang setelah elemen tersembunyi.

Penanganan parameter backend

sumber gambar


6

Saya menggunakan blok jQuery ini, yang akan menambahkan input tersembunyi pada waktu-kirim ke setiap kotak centang yang tidak dicentang. Ini akan menjamin Anda selalu mendapatkan nilai yang dikirimkan untuk setiap kotak centang, setiap saat, tanpa mengacaukan markup Anda dan berisiko lupa melakukannya pada kotak centang yang Anda tambahkan nanti. Ini juga agnostik untuk tumpukan backend apa pun (PHP, Ruby, dll.) Yang Anda gunakan.

// Add an event listener on #form's submit action...
$("#form").submit(
    function() {

        // For each unchecked checkbox on the form...
        $(this).find($("input:checkbox:not(:checked)")).each(

            // Create a hidden field with the same name as the checkbox and a value of 0
            // You could just as easily use "off", "false", or whatever you want to get
            // when the checkbox is empty.
            function(index) {
                var input = $('<input />');
                input.attr('type', 'hidden');
                input.attr('name', $(this).attr("name")); // Same name as the checkbox
                input.attr('value', "0"); // or 'off', 'false', 'no', whatever

                // append it to the form the checkbox is in just as it's being submitted
                var form = $(this)[0].form;
                $(form).append(input);

            }   // end function inside each()
        );      // end each() argument list

        return true;    // Don't abort the form submit

    }   // end function inside submit()
);      // end submit() argument list

5

Anda juga dapat mencegat acara form.smit dan membalikkan cek sebelum mengirim

$('form').submit(function(event){
    $('input[type=checkbox]').prop('checked', function(index, value){
        return !value;
    });
});

4

Saya melihat pertanyaan ini sudah tua dan memiliki banyak jawaban, tetapi saya tetap akan memberikan uang saya. Pilihan saya adalah untuk solusi javascript pada acara 'ajukan' formulir, seperti yang ditunjukkan beberapa orang. Tidak menggandakan input (terutama jika Anda memiliki nama panjang dan atribut dengan kode php dicampur dengan html), tidak ada sisi server yang mengganggu (yang akan perlu mengetahui semua nama bidang dan memeriksanya satu per satu), cukup ambil semua item yang tidak dicentang , berikan mereka nilai 0 (atau apa pun yang Anda butuhkan untuk menunjukkan status 'tidak dicentang') dan kemudian ubah atributnya 'dicentang' menjadi true

    $('form').submit(function(e){
    var b = $("input:checkbox:not(:checked)");
    $(b).each(function () {
        $(this).val(0); //Set whatever value you need for 'not checked'
        $(this).attr("checked", true);
    });
    return true;
});

dengan cara ini Anda akan memiliki array $ _POST seperti ini:

Array
(
            [field1] => 1
            [field2] => 0
)

Tidak bekerja di sisiku. Mencoba melakukan ini tetapi masih belum memposting semua kotak centang. [kode] $ ("# filter input"). ubah (fungsi (e) {console.log ('sublmit'); var b = $ ("input: kotak centang: tidak (: dicentang)"); $ (b) .each (function () {$ (this) .val (2); $ (this) .attr ("checked", true);}); $ ("# filter"). submit ();}); [/ code]
lio

Apakah trik untuk saya. Satu - satunya kekurangan - pada formulir kirim setiap kotak centang dicentang. Ini bisa membingungkan bagi pengguna, tetapi karena halaman memuat ulang setelah mengirimkan formulir, saya pikir ini masalah kecil.
Oksana Romaniv

Seperti yang dikatakan Oksana, ia memeriksa semua kotak centang, termasuk kotak centang apa pun yang diperlukan yang tidak dipilih sendiri oleh pengguna sehingga formulir dapat dikirimkan tanpa pengguna menyetujui beberapa syarat.
bskool

4
$('form').submit(function () {
    $(this).find('input[type="checkbox"]').each( function () {
        var checkbox = $(this);
        if( checkbox.is(':checked')) {
            checkbox.attr('value','1');
        } else {
            checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
            checkbox.prop('disabled', true);
        }
    })
});

1
Ini berhasil untuk saya. Alih-alih menggunakan .submit Anda akan menggunakan .click. Kemudian hapus bit yang menonaktifkan kotak centang. Setelah itu bekerja dengan sempurna.
cgrouge

1
Jawaban terbaik tidak perlu menambahkan input tersembunyi lain untuk masing-masing
Sky

3

Apa yang saya lakukan agak berbeda. Pertama, saya mengubah nilai dari semua kotak centang yang tidak dicentang. Untuk "0", lalu pilih semuanya, sehingga nilainya akan diserahkan.

function checkboxvalues(){
  $("#checkbox-container input:checkbox").each(function({ 
    if($(this).prop("checked")!=true){
      $(this).val("0");
      $(this).prop("checked", true);
    }
  });
}


Jawabannya bagus, tetapi saya ingin tahu apakah ini berbeda dari jawaban @Rameez SOOMRO?
Imran Qamer

Hasil akhir yang serupa, hanya dengan cara ini Anda tidak mengubah nilai kotak centang yang dicentang.
Seborreia

2

Saya lebih suka menyusun $ _POST

if (!$_POST['checkboxname']) !$_POST['checkboxname'] = 0;

itu keberatan, jika POST tidak memiliki nilai 'checkboxname', itu tidak dicentang jadi, beri nilai.

Anda dapat membuat array nilai kotak centang Anda dan membuat fungsi yang memeriksa apakah ada nilai, jika tidak, itu keberatan yang tidak dicentang dan Anda dapat menetapkan suatu nilai


1

Contoh pada tindakan Ajax adalah (': dicentang') menggunakan jQuery alih-alih .val ();

            var params = {
                books: $('input#users').is(':checked'),
                news : $('input#news').is(':checked'),
                magazine : $('input#magazine').is(':checked')
            };

params akan mendapatkan nilai dalam TRUE OR FALSE ..


1

Kotak centang biasanya mewakili data biner yang disimpan dalam database sebagai nilai Ya / Tidak, Y / N atau 1/0. Kotak centang HTML memiliki sifat buruk untuk mengirim nilai ke server hanya jika kotak centang dicentang! Itu berarti bahwa skrip server di situs lain harus mengetahui terlebih dahulu apa saja kotak centang yang mungkin pada halaman web agar dapat menyimpan nilai-nilai positif (dicentang) atau negatif (tidak dicentang). Sebenarnya hanya nilai negatif yang menjadi masalah (ketika pengguna menghapus centang sebelumnya (pra) nilai yang diperiksa - bagaimana server dapat mengetahui hal ini ketika tidak ada yang dikirim jika tidak tahu sebelumnya bahwa nama ini harus dikirim). Jika Anda memiliki skrip sisi server yang secara dinamis membuat skrip UPDATE ada masalah karena Anda tidak tahu semua kotak centang harus diterima untuk menetapkan nilai Y untuk dicentang dan nilai N untuk yang tidak dicentang (tidak diterima).

Karena saya menyimpan nilai 'Y' dan 'N' di database saya dan mewakilinya melalui kotak centang dicentang dan tidak dicentang di halaman, saya menambahkan bidang tersembunyi untuk setiap nilai (kotak centang) dengan nilai 'Y' dan 'N' kemudian menggunakan kotak centang hanya untuk visual representasi, dan gunakan cek fungsi JavaScript sederhana () untuk menetapkan nilai jika menurut pilihan.

<input type="hidden" id="N1" name="N1" value="Y" />
<input type="checkbox"<?php if($N1==='Y') echo ' checked="checked"'; ?> onclick="check(this);" />
<label for="N1">Checkbox #1</label>

gunakan satu JavaScript onclick listener dan fungsi panggilan cek () untuk setiap kotak centang di halaman web saya:

function check(me)
{
  if(me.checked)
  {
    me.previousSibling.previousSibling.value='Y';
  }
  else
  {
    me.previousSibling.previousSibling.value='N';
  }
}

Dengan cara ini nilai 'Y' atau 'N' selalu dikirim ke skrip sisi server, ia tahu bidang apa yang harus diperbarui dan tidak perlu konversi checbox "on" nilai menjadi 'Y' atau tidak menerima kotak centang ke 'N' '

CATATAN: spasi putih atau baris baru juga merupakan saudara kandung, jadi di sini saya perlu .previousSibling.previousSibling.value. Jika tidak ada ruang di antara hanya .previousSibling.value


Anda tidak perlu menambahkan onclick listener secara eksplisit seperti sebelumnya, Anda dapat menggunakan jQuery library untuk secara dinamis menambahkan listener klik dengan fungsi untuk mengubah nilai ke semua kotak centang di halaman Anda:

$('input[type=checkbox]').click(function()
{
  if(this.checked)
  {
    $(this).prev().val('Y');
  }
  else
  {
    $(this).prev().val('N');
  }
});

1

Semua jawaban bagus, tetapi jika Anda memiliki beberapa kotak centang dalam formulir dengan nama yang sama dan Anda ingin memposting status setiap kotak centang. Kemudian saya telah memecahkan masalah ini dengan menempatkan bidang tersembunyi dengan kotak centang (nama yang terkait dengan apa yang saya inginkan).

<input type="hidden" class="checkbox_handler" name="is_admin[]" value="0" />
<input type="checkbox" name="is_admin_ck[]" value="1" />

kemudian kendalikan status perubahan kotak centang dengan kode jquery di bawah ini:

$(documen).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 1 : 0;
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});

sekarang pada perubahan kotak centang apa pun, itu akan mengubah nilai bidang tersembunyi terkait. Dan di server Anda hanya dapat melihat ke bidang tersembunyi dan bukan kotak centang.

Semoga ini bisa membantu seseorang mengalami masalah seperti ini. bersorak :)


1

Masalah dengan kotak centang adalah bahwa jika mereka tidak dicentang maka mereka tidak diposting dengan formulir Anda. Jika Anda mencentang kotak centang dan memposting formulir, Anda akan mendapatkan nilai kotak centang dalam variabel $ _POST yang dapat Anda gunakan untuk memproses formulir, jika tidak dicentang, tidak ada nilai yang akan ditambahkan ke variabel $ _POST.

Dalam PHP Anda biasanya mengatasi masalah ini dengan melakukan pemeriksaan isset () pada elemen kotak centang Anda. Jika elemen yang Anda harapkan tidak disetel dalam variabel $ _POST maka kita tahu bahwa kotak centang tidak dicentang dan nilainya bisa salah.

if(!isset($_POST['checkbox1']))
{
     $checkboxValue = false;
} else {
     $checkboxValue = $_POST['checkbox1'];
}

Tetapi jika Anda telah membuat formulir dinamis maka Anda tidak akan selalu tahu atribut nama dari kotak centang Anda, jika Anda tidak tahu nama kotak centang maka Anda tidak dapat menggunakan fungsi penerbit untuk memeriksa apakah ini telah dikirim dengan variabel $ _POST.


1
function SubmitCheckBox(obj) {
     obj.value   = obj.checked ? "on" : "off";
     obj.checked = true;
     return obj.form.submit();
}

<input type=checkbox name="foo" onChange="return SubmitCheckBox(this);">

0

Ada solusi yang lebih baik. Pertama-tama berikan atribut nama hanya pada kotak centang yang dicentang. Kemudian pada klik submit, melalui JavaScript functionAnda mencentang semua kotak yang tidak dicentang. Jadi ketika Anda submithanya mereka yang akan diambil pada form collectionmereka yang memiliki nameproperti.

  //removing name attribute from all checked checkboxes
                  var a = $('input:checkbox:checked');
                   $(a).each(function () {
                       $(this).removeAttr("name");        
                   });

   // checking all unchecked checkboxes
                   var b = $("input:checkbox:not(:checked)");
                   $(b).each(function () {
                       $(this).attr("checked", true);
                   });

Keuntungan: Tidak perlu membuat kotak tersembunyi tambahan, dan memanipulasinya.


0

@ cpburnz melakukannya dengan benar tetapi untuk banyak kode, berikut adalah ide yang sama menggunakan lebih sedikit kode

JS:

// jQuery OnLoad
$(function(){
    // Listen to input type checkbox on change event
    $("input[type=checkbox]").change(function(){
        $(this).parent().find('input[type=hidden]').val((this.checked)?1:0);
    });
});

HTML (perhatikan nama bidang menggunakan nama array):

<div>
    <input type="checkbox" checked="checked">
    <input type="hidden" name="field_name[34]" value="1"/>
</div>
<div>
    <input type="checkbox">
    <input type="hidden" name="field_name[35]" value="0"/>
</div>
<div>

Dan untuk PHP:

<div>
    <input type="checkbox"<?=($boolean)?' checked="checked"':''?>>
    <input type="hidden" name="field_name[<?=$item_id?>]" value="<?=($boolean)?1:0?>"/>
</div>

0

Versi jQuery dari jawaban @ vishnu.

if($('#testName').is(":checked")){
    $('#testNameHidden').prop('disabled', true);
}

Jika Anda menggunakan jQuery 1.5 atau di bawah, silakan gunakan fungsi .attr () alih-alih .prop ()


0

Solusi ini terinspirasi oleh @ desw's.

Jika nama input Anda berada dalam "style form", Anda akan kehilangan asosiasi indeks array dengan nilai chekbox Anda segera setelah satu chekbox diperiksa, menambah "disosiasi" ini dengan satu unit setiap kali chekbox diperiksa. Ini bisa menjadi kasus formulir untuk memasukkan sesuatu seperti karyawan yang disusun oleh beberapa bidang, misalnya:

<input type="text" name="employee[]" />
<input type="hidden" name="isSingle[] value="no" />
<input type="checkbox" name="isSingle[] value="yes" />

Jika Anda memasukkan tiga karyawan sekaligus dan yang pertama dan yang kedua adalah tunggal, Anda akan mendapatkan 5 elemen isSingle array , sehingga Anda tidak akan dapat mengulangi sekaligus melalui tiga array untuk, misalnya , masukkan karyawan ke dalam basis data.

Anda dapat mengatasinya dengan beberapa postprocessing array yang mudah. Saya menggunakan PHP di sisi server dan saya melakukan ini:

$j = 0;
$areSingles = $_POST['isSingle'];
foreach($areSingles as $isSingle){
  if($isSingle=='yes'){
    unset($areSingles[$j-1]);
  }
  $j++;
}
$areSingles = array_values($areSingles);

0

Jadi solusi ini berlebihan untuk pertanyaan ini, tetapi itu membantu saya ketika saya memiliki kotak centang yang sama yang terjadi berkali-kali untuk baris berbeda dalam sebuah tabel. Saya perlu mengetahui baris yang diwakili kotak centang dan juga mengetahui status kotak centang (dicentang / tidak dicentang).

Apa yang saya lakukan adalah menghapus atribut nama dari input kotak centang saya, memberi mereka semua kelas yang sama, dan membuat input tersembunyi yang akan menampung JSON yang setara dengan data.

HTML

 <table id="permissions-table">
    <tr>
	<td>
	    <input type="checkbox" class="has-permission-cb" value="Jim">
	    <input type="checkbox" class="has-permission-cb" value="Bob">
	    <input type="checkbox" class="has-permission-cb" value="Suzy">
	</td>
    </tr>
 </table>
 <input type="hidden" id="has-permissions-values" name="has-permissions-values" value="">

Javascript untuk dijalankan pada formulir kirim

var perms = {};
$(".has-permission-checkbox").each(function(){
  var userName = this.value;
  var val = ($(this).prop("checked")) ? 1 : 0
  perms[userName] = {"hasPermission" : val};
});
$("#has-permissions-values").val(JSON.stringify(perms));

String json akan diteruskan dengan formulir sebagai $ _POST ["memiliki-izin-nilai"]. Dalam PHP, decode string ke dalam array dan Anda akan memiliki array asosiatif yang memiliki setiap baris dan nilai true / false untuk setiap kotak centang yang sesuai. Maka sangat mudah untuk berjalan dan membandingkan dengan nilai-nilai database saat ini.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.