POST işaretlenmemiş HTML onay kutuları


303

Varsayılan olarak işaretlenmiş bir sürü onay kutusu var. Kullanıcılarım muhtemelen birkaç onay kutusunun işaretini kaldıracak ve gerisini işaretli bırakacaktır.

Form POST olan onay kutularını yapmak için herhangi bir yolu var mı yok ziyade olanlardan daha, kontrol edilir kontrol?

Yanıtlar:


217

Farklı bir kimliğe sahip onay kutusu için gizli bir giriş ekleyin:

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

Formu göndermeden önce, işaretli koşula bağlı olarak gizli girişi devre dışı bırakın:

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

58
Böyle bir işaretleme tabanlı çözümle gidiyorsanız, diğer birçok yanıta gizli girdiyi önce koymak daha iyidir. PHP kullanıyorsanız, javascript bağımlılığını ortadan kaldırabilirsiniz, çünkü yalnızca son değer kullanılır.
Ben

12
gamov, yanılıyorsunuz, etiketler giriş adı özniteliğine değil, id özniteliğine göre girdilere eklenir
Justin Emery

14
Yazarların bu şekilde tasarladığına inanmak zor. Neden tüm girdi alanlarını kontrol edilmeyenler için bazı varsayılan değerlerle göndermeyelim :( Bazı gizli alanları "hack" uygulamak zorunda kaldıktan sonra çok daha net bir çözüm olurdu.
Şimdiye kadar

34
Bu çok acayip geliyor.
EralpB

65
checkboxElemanın altında yatan tasarımın korkunç olduğunu düşünen tek kişi ben miyim ? İkili bir denetimdir, ikili değerler göndermelidirler.
alexw

474

Şimdiye kadar en sevdiğim çözüm, kontrol edilmeyebilecek onay kutusuyla aynı ada sahip gizli bir girdi koymaktır. Bence onay kutusu işaretli değilse, gizli giriş hala başarılı ve sunucuya gönderilir ama onay kutusu işaretli ise, önce gizli girişi geçersiz kılar. Bu şekilde, gönderilen verilerdeki hangi değerlerin onay kutularından gelmesi beklendiğini takip etmek zorunda kalmazsınız.

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

3
Şimdi soruyu tekrar okuduğum için, bunun gerçekten istediğiniz şey olmadığı anlaşılıyor. Ancak, bu yanıtı anlamaya çalışırken bu soruya geldim, belki de başka biri için yararlı olabilir.
Sam

2
.NET farklıdır, bunun yerine bkz. Stackoverflow.com/questions/7600817/…
KCD

121
Kutuyu işaretlerseniz, tarayıcının hem gizli hem de onay kutusu değerlerini göndereceği unutulmamalıdır. Bu çözüm daha sonra sunucunun post değişkenini bu 2 değerle işlemesine dayanır. Yalnızca son değeri alırsa (örn. PHP), kodunuz beklendiği gibi çalışır. Ancak, bazı sunucular bunu farklı şekilde ele alır, Bazıları ilk değeri alırken, diğerleri her iki değeri de bir listeye / diziye yerleştirir.
Michael Ekoka

1
Bu cevap, sunucuya iki eşit adlandırılmış girişten yalnızca birini gönderebileceğiniz varsayımına dayanmaktadır - bunun neden bu kadar çok oy aldığını anlamıyorum?
Muleskinner

7
@sam bu fikri nereden aldığını bilmiyor musun? İki veya daha fazla denetim aynı şekilde adlandırıldığında, her ikisi de gönderildiğinde sunucuya gönderilir (ancak onay kutuları için, yalnızca işaretlenirse) - sunucuda nasıl işlendikleri sunucu tarafı uygulamasına bağlıdır. Bana inanmıyorsanız, kemancı gibi bir araç kullanarak trafiği izleyerek kendiniz görebilirsiniz.
Muleskinner

75

Vanilya JavaScript kullanarak çözdüm:

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

Bu iki giriş elemanı arasında boşluk veya çizgi izi olmamasına dikkat edin!

this.previousSibling.previousSibling"Üst" öğeleri almak için kullanabilirsiniz .

PHP ile adlandırılmış gizli alanı 0 (ayarlanmamış) veya 1 (ayarlanmış) olarak kontrol edebilirsiniz.


Neden iki öğe arasında boşluk veya satır kesmesi yapamıyorsunuz?
Michael Potter

@MichaelPotter: this.previousSibling, beyaz alanı kardeş olarak alacak, bu yüzden çalışmıyor.
Marcel Ennix

4
Oh bu MÜKEMMEL! Burada yinelenen adlandırılmış alanlarla birden çok alan kümesi gönderme sorununu çözer. Diğer çözümlerin hiçbiri bunu yapmaz. Marcel'in yöntemini kullanarak, yayınlanan alanlarınız eşit uzunlukta dizilere sahip olacaktır. Yani bu senaryo: <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>* Orada yeni satırlar olduğunu varsayın. Mini biçimlendirme kod bloklarında çalışmıyor gibi görünüyorlar
Brian Layman

1
Bu kabul edilen cevap olmalı. Dizilerle çalışır (ex / name = "soup []")
jdavid05

2
Bunun previousElementSiblingyerine kullanabilirsiniz previousSibling. Neredeyse her yerde desteklenir ve metin düğümlerini yok sayar.
MarSoft

23

Kişisel favorim, onay kutusunun işareti kaldırılırsa kullanılacak aynı ada sahip gizli bir alan eklemektir. Ancak çözüm göründüğü kadar kolay değil.

Bu kodu eklerseniz:

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

Tarayıcı burada ne yaptığınızı gerçekten önemsemez. Tarayıcı her iki parametreyi de sunucuya gönderir ve sunucunun bunlarla ne yapacağına karar vermesi gerekir.

Örneğin PHP, son değeri kullanılacak değer olarak alır (bkz: Yinelenen HTTP GET sorgu anahtarlarının yetkili konumu )

Ancak birlikte çalıştığım diğer sistemler (Java tabanlı) bunu tersine çeviriyor - size sadece ilk değeri sunuyorlar. Bunun yerine .NET size her iki öğeden oluşan bir dizi verecektir

Bunu bazen node.js, Python ve Perl ile test etmeye çalışacağım.


2
ruby ve node.js, çoğaltılan form alanlarının son değerini alır. Ruby on Rails'in yardımcı yöntemleri bu nedenle bu şekilde onay kutuları oluşturur.
nzifnab

7
Bunu düzeltmek için - bu HTTP Parametre Kirliliği adlı bir saldırıya dayanıyor ve OWASP tarafından analiz edildi: owasp.org/images/b/ba/AppsecEU09_CarettoniDiPaola_v0.8.pdf (sayfa 9), 20'nin bir listesini bulabileceğiniz sistem sistemleri ve bunların nasıl ele alındıklarına bakın.
SimonSimCity

1
Siz aradığınız sürece Java Servlets size her şeyi verirrequest.getParameterValues
mauhiz

20

Bu konuda yaygın bir teknik, her bir onay kutusuyla birlikte gizli bir değişken taşımaktır.

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

Sunucu tarafında, önce gizli değişkenlerin listesini tespit ediyoruz ve gizli değişkenlerin her biri için karşılık gelen onay kutusu girişinin form verilerinde gönderilip gönderilmediğini görmeye çalışıyoruz.

Sunucu tarafı algoritması muhtemelen şöyle görünecektir:

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

Yukarıdakiler soruyu tam olarak cevaplamıyor, ancak benzer işlevsellik elde etmek için alternatif bir yol sunuyor.


20

tüm onay kutuları için gizli bir alan oluşturmanız gerekmez, sadece kodumu kopyalayın. valueatanacak işaretlenmezse onay kutusunun değerini değiştirir ve onay 0kutusu işaretlenirse value,1

$("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
Bu çözüm, Dom'u gizli alanlarla kirletmekten daha iyi ve daha zarif çalışır.
Prasad Paranjape

9
Bu, form gönderilirken kutunun geçici olarak işaretlenmesine neden olur. Bu (en iyi) kullanıcı için kafa karıştırıcı.
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>

Onay kutusunun adını bırakırsanız iletilmez. Yalnızca test_checkbox dizisi.


1
Çok harika bir çözüm, ama benim durumumda live () çalışmıyor, bu yüzden () yöntemini kullandım: $ ('input [type = checkbox]'). On ("change", function () {...}) ;
Massa

4
LIVE kullanılmıyor. Artık yığın akışındaki yanıtlarda kullanmayın. AMEM.
Ismael

Bu cevap gerçekten en iyisi .. Beklendiği gibi çalışıyor. Grup onay kutusu için bile.
Alemoh Rapheal Baja

11

Bazı Javascript'i formun gönderme etkinliğinde yapabilirsiniz. Ancak yapabileceğiniz tek şey bu, tarayıcıların bunu kendileri yapmasını sağlamanın bir yolu yok. Ayrıca formunuzun Javascript içermeyen kullanıcılar için kesileceği anlamına gelir. Sunucuda hangi onay kutularının olduğunu bilmek daha iyidir, böylece gönderilen form değerlerinde ( $_POSTPHP'de) bulunmayanların işaretli olmadığını belirtebilirsiniz .



$_REQUESTbetiğiniz her iki yöntemi de destekliyorsa bazı kodların yeniden kullanılmasına izin verdiği için iyi bir uygulamadır.
nullabilite

9

Aslında aşağıdakileri yapardım.

Gizli giriş alanımın onay kutusu girişiyle aynı ada sahip olmasını sağlayın

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

ve daha sonra i ilk kez $ _POST dizisinde alınan yinelenen değerleri kaldırmak, benzersiz değerleri her atfer atfer.

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

Bu bir gönderiden dizi yinelenen değerleri kaldırmak var


Ad alanı değerindeki [] öğesinin amacı nedir?
Michael Potter

@MichaelPotter PHP'ye yazı gönderildiğinde, `checkbox_name []
Twister1002

@ Twister1002, sanırım isme [] eklemenin amacını değil, name özelliğinin amacını tarif ettin. Bir web araması yaptım ve bazı insanlar bunu alanlarla birlikte gruplandırmak için grup adı [elementname] adıyla yapıyor gibi görünüyor, ancak boş [] için bir açıklama bulamadım.
Michael Potter

1
@MichaelPotter Üzgünüm, bu ifadeyi bitirdiğimi sanıyordum. Ama görünüşe göre değil. Tekrar yapmama izin ver. PHP'ye gönderildiğinde PHP işlemcisi onu bir dizi olarak okuyacaktır. Böylece her isimle checkbox_name[]her değer bir diziye girilir ve daha sonra çekebilirsiniz. Örn: $_POST['checkbox_name'][0]ve aynı alanın kaç alana sahip olduğu arttıkça. Başka bir örnek, adlı üç alanınız varsa field_name[], field_namebenzer ikinci değerini alabilirsiniz $_POST['field_name'][1]. Aynı ada sahip birkaç alanınız varsa amacı şaşırtıcı olabilir.
Twister1002

8

"Sunucu yaklaşımı ile gittim. İyi çalışıyor gibi görünüyor - teşekkürler. - reach4thelasers 1 Aralık '15: 19'da" Ben bunu sahibinden tavsiye etmek istiyorum. Alıntılandığı gibi: javascript çözümü nasıl sunucu işleyicisi bağlıdır (ben kontrol etmedi)

gibi

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

8

Bu sorunun 3 yaşında olduğunu biliyorum ama çok işe yaradığını düşündüğüm bir çözüm buldum.

$ _POST değişkeninin atanıp atanmadığını kontrol edebilir ve bir değişkene kaydedebilirsiniz.

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

isset () işlevi $ _POST değişkeninin atanıp atanmadığını kontrol eder. Atanmamışsa mantık tarafından onay kutusu işaretlenmez.


En popüler yanıt ekran okuyucular için korkunç bir çözüm olduğu için bu çok daha iyidir.
Kevin Waterson

7

Buradaki yanıtların çoğu JavaScript veya yinelenen giriş denetimlerinin kullanılmasını gerektirir. Bazen bunun tamamen sunucu tarafında ele alınması gerekir.

Bu ortak sorunun çözülmesinin (amaçlanan) anahtarının formun gönderim giriş kontrolü olduğuna inanıyorum.

Onay kutuları için denetlenmeyen değerleri başarıyla yorumlamak ve işlemek için aşağıdakiler hakkında bilgi sahibi olmanız gerekir:

  1. Onay kutularının adları
  2. Formun gönderim giriş öğesinin adı

Formun gönderilip gönderilmediğini kontrol ederek (gönderim giriş elemanına bir değer atanır), kontrol edilmemiş onay kutusu değerleri varsayılabilir .

Örneğin:

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

PHP kullanırken, hangi onay kutularının işaretlendiğini tespit etmek oldukça önemsizdir.

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

?>

İlk veriler her sayfa yüklemesinde yüklenebilir, ancak yalnızca form gönderildiyse değiştirilmelidir. Onay kutularının adları önceden bilindiği için, ayrı ayrı gezilebilir ve incelenebilir, böylece bireysel değerlerinin yokluğu kontrol edilmediğini gösterir.


6

Önce Sam'in versiyonunu denedim. İyi fikir, ancak aynı adda formda birden fazla öğenin olmasına neden olur. İsme dayalı öğeler bulan herhangi bir javascript kullanırsanız, artık bir dizi öğe döndürür.

PHP'de Shailesh fikrini çalıştım, bu benim için çalışıyor. İşte benim kod:

/ * Orijinal varsa '.hidden' alanlarını silin, yoksa '.hidden' değerini kullanın. * /
foreach ($ field_name => $ değeri olarak $ _POST ['frmmain']
{
    // Yalnızca '.hidden' ile biten öğelere bakın
    if (! substr ($ field_name, -strlen ('. hidden')))) {
        break;
    }

    // '.hidden' olmadan adı al
    $ real_name = substr ($ anahtar, strlen ($ alan_adı) - strlen ('. gizli'));

    // Bir orijinal yoksa '.hidden' değerine sahip bir 'sahte' orijinal alan oluşturun
    if (! array_key_exists ($ real_name, $ POST_copy)) {
        $ _POST [$ real_name] = $ değer;
    }

    // '.hidden' öğesini sil
    sertleşmemiş ($ _ POST [$ alan_adı]);
}

6

Ayrıca, ekstra bir giriş alanı yayınladığınız çözümü beğendim, JavaScript kullanarak bana biraz acayip görünüyor.

Arka uç için ne kullandığınıza bağlı olarak hangi girdinin önce gittiğine bağlı olacaktır.

İlk oluşumun (JSP) kullanıldığı bir sunucu arka ucu için aşağıdakileri yapmanız gerekir.

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


Son oluşumun kullanıldığı bir sunucu arka ucu için (PHP, Rails) aşağıdakileri yapmanız gerekir.

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


Tüm oluşumların bir liste veri türünde ( [], array) depolandığı sunucu arka ucu için . (Python / Zope)

Hangi sırayla istediğinizi gönderebilirsiniz, sadece checkboxtype özelliğine sahip değeri girmeye çalışmanız gerekir . Dolayısıyla, onay kutusunun gizli öğeden önce olması durumunda listenin ilk dizini ve onay kutusunun gizli öğeden sonra olması durumunda son dizin.


Tüm örneklerin virgülle (ASP.NET / IIS) birleştirildiği bir sunucu arka ucu için, liste veri türü oluşturmak için virgül kullanarak ayırıcı olarak dizeyi (böl / patlatmanız) gerekir. ( [])

Şimdi, onay kutusu gizli öğeden önce olsaydı listenin ilk dizinini ve onay kutusu gizli öğeden sonraysa son dizini yakalamayı deneyebilirsiniz.

Arka uç parametre işleme

görüntü kaynağı


6

Her denetlenmeyen onay kutusuna gönderme zamanında gizli bir girdi ekleyecek bu jQuery bloğunu kullanıyorum. İşaretlemenizi karmaşıklaştırmadan ve daha sonra ekleyeceğiniz bir onay kutusunda yapmayı unutmadan, her seferinde her onay kutusu için bir değer almanızı garanti eder. Kullandığınız arka uç yığınına (PHP, Ruby, vb.) De agnostiktir.

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

Ayrıca form.submit olayını kesebilir ve göndermeden önce tersine kontrol edebilirsiniz

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

4

Bu sorunun eski ve çok fazla cevabı olduğunu görüyorum, ama yine de kuruşumu vereceğim. Oyum, bazılarının belirttiği gibi, formun 'gönder' etkinliğindeki javascript çözümü için. Girdileri iki katına çıkarmayın (özellikle html ile karıştırılmış php koduna sahip uzun adlarınız ve öznitelikleriniz varsa), sunucu tarafı rahatsızlığı (tüm alan adlarını bilmenizi ve bunları tek tek kontrol etmenizi gerektirir), sadece denetlenmeyen tüm öğeleri getirin , onlara 0 değeri atayın (veya "kontrol edilmedi" durumunu belirtmek için ihtiyacınız olan her şeyi) ve ardından "kontrol edildi" niteliklerini true olarak değiştirin

    $('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;
});

bu şekilde şöyle bir $ _POST dizisine sahip olacaksınız:

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

Yanımda çalışmıyor. Bunu yapmaya çalışıyorum ama yine de tüm onay kutularını göndermiyor. [kod] $ ("# filtre girişi"). değişiklik (işlev (e) {console.log ('sublmit'); var b = $ ("giriş: onay kutusu: not (: işaretli)"); $ (b) .each (function () {$ (this) .val (2); $ (this) .attr ("kontrol edildi", doğru);}); $ ("# filtre"). gönder ();}); [/ kod]
lio

Benim için hile yaptı. Her onay kutusunu gönderen tek dezavantaj formu kontrol edildi. Bu bir kullanıcı için kafa karıştırıcı olabilir, ancak form gönderildikten sonra sayfa yeniden yüklendiğinden, bunun küçük bir sorun olduğunu düşünüyorum.
Oksana Romaniv

Oksana'nın dediği gibi, kullanıcının herhangi bir koşul kabul etmeden formun gönderilmesine izin vermesini istemeyen gerekli onay kutuları da dahil olmak üzere tüm onay kutularını işaretler.
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
Bu benim için çalıştı. .Submit yerine .click kullanırsınız. Ardından onay kutularını devre dışı bırakan biti kaldırın. Bundan sonra mükemmel çalışıyor.
cgrouge

1
En iyi cevap her biri için başka bir gizli giriş eklemenize gerek yok
Sky

3

Yaptığım şey biraz farklıydı. İlk olarak tüm işaretlenmemiş onay kutularının değerlerini değiştirdim. "0" değerine, sonra hepsini seçti, böylece değer gönderilecek.

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


Cevap iyidir, ama @Rameez SOOMRO'nun cevabından farklı olduğunu bilmek istiyorum?
İmran Qamer

Benzer sonuç, yalnızca bu şekilde işaretli onay kutularının değerini değiştirmezsiniz.
Seborreia

2

$ _POST harmanlamayı tercih ederim

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

zihin, POST 'onay kutusu adı' değerine sahip değilse, işaretlenmemiş, bir değer atamak.

ckeckbox değerlerinizin bir dizisini oluşturabilir ve değerlerin var olup olmadığını kontrol eden bir işlev oluşturabilirsiniz, eğer değilse, işaretlenmemiş olanları algılar ve bir değer atayabilirsiniz


1

Ajax eylemlerine örnek olarak (.: İşaretli ') .val () yerine jQuery kullanılmıştır;

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

parametreler DOĞRU VEYA YANLIŞ olarak değer alacaktır ..


1

Onay kutuları genellikle veritabanında Evet / Hayır, E / H veya 1/0 değerleri olarak depolanan ikili verileri temsil eder. HTML onay kutuları, yalnızca onay kutusu işaretliyse sunucuya değer göndermek için kötü bir yapıya sahiptir! Bu, başka bir sitedeki sunucu komut dosyasının, pozitif (işaretli) veya negatif (denetlenmemiş) değerleri depolayabilmek için web sayfasındaki tüm olası onay kutularının önceden bilmesi gerektiği anlamına gelir. Aslında sadece negatif değerler sorunludur (kullanıcı daha önce (önceden) kontrol edilen değeri işaretlediğinde - bu adın önceden gönderilmesi gerektiğini bilmiyorsa hiçbir şey gönderilmediğinde sunucu bunu nasıl bilebilir). Dinamik olarak UPDATE komut dosyası oluşturan bir sunucu tarafı komut dosyanız varsa, denetlenenler için Y değerini ve işaretlenmemiş (alınmamış) olanlar için N değerini ayarlamak için tüm onay kutularının alınması gerektiğini bilmediğiniz için bir sorun vardır.

Veritabanımda 'Y' ve 'N' değerlerini sakladığım ve bunları sayfadaki işaretli ve işaretsiz onay kutuları aracılığıyla temsil ettiğim için, 'Y' ve 'N' değerlerine sahip her bir değer (onay kutusu) için gizli alan ekledim, sonra sadece görsel olarak onay kutularını kullandım ve seçime göre olup olmadığını ayarlamak için basit JavaScript işlev kontrolü () kullanın.

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

web sayfamdaki her onay kutusu için bir JavaScript onclick dinleyicisi ve çağrı işlevi denetimi () kullan:

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

Bu şekilde 'Y' veya 'N' değerleri her zaman sunucu tarafı komut dosyasına gönderilir, güncellenmesi gereken alanların ne olduğunu bilir ve "değer" üzerindeki checbox'ın "Y" ye dönüştürülmesine veya onay kutusu alınmadan onay kutusunu "N" ye çevirmeye gerek yoktur '.

NOT: beyaz boşluk veya yeni çizgi de bir kardeş bu yüzden burada .previousSibling.previousSibling.value gerekir. O zaman sadece .previousSibling.value arasında boşluk yoksa


Daha önce olduğu gibi onclick dinleyicisini açıkça eklemenize gerek yoktur, sayfanızdaki tüm onay kutularına değer değiştirmek için işlevli tıklama dinleyicisini dinamik olarak eklemek için jQuery kitaplığını kullanabilirsiniz:

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

1

Tüm yanıtlar harika, ancak aynı ada sahip bir formda birden fazla onay kutunuz varsa ve her onay kutusunun durumunu göndermek istiyorsanız. Sonra onay kutusu (istediğim ile ilgili adı) ile gizli bir alan yerleştirerek bu sorunu çözdüm.

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

ardından onay kutusunun değişiklik durumunu aşağıdaki jquery koduyla kontrol edin:

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

şimdi herhangi bir onay kutusunun değiştirilmesi durumunda, ilgili gizli alanın değerini değiştirecektir. Ve sunucuda onay kutuları yerine yalnızca gizli alanlara bakabilirsiniz.

Umarım bu tür bir problemi olan birine yardımcı olur. tezahürat :)


1

Onay kutularındaki sorun, işaretlenmemiş olmaları durumunda formunuzla birlikte gönderilmemesidir. Bir onay kutusunu işaretleyip bir form gönderirseniz, bir formu işlemek için kullanabileceğiniz $ _POST değişkenindeki onay kutusunun değerini alırsınız, işaretlenmezse $ _POST değişkenine hiçbir değer eklenmez.

PHP'de normal olarak, onay kutusu öğenizde bir isset () denetimi yaparak bu sorunu çözersiniz. Beklediğiniz öğe $ _POST değişkeninde ayarlanmamışsa, onay kutusunun işaretli olmadığını ve değerin yanlış olabileceğini biliyoruz.

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

Ancak dinamik bir form oluşturduysanız, onay kutularınızın ad özniteliğini her zaman bilemezsiniz, onay kutusunun adını bilmiyorsanız, bununla birlikte gönderilip gönderilmediğini kontrol etmek için isset işlevini kullanamazsınız. $ _POST değişkeni.


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

Daha iyi bir çözüm var. Her şeyden önce, yalnızca işaretli olan onay kutularına ad niteliği sağlar. Daha sonra, submitbir JavaScript ile tıklandığında functiontüm işaretlenmemiş kutuları işaretlersiniz. Eğer Yani submitsadece olanlarda alınır form collectionolanlar nameözelliği.

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

Avantajı: Ekstra gizli kutular oluşturmaya ve bunları değiştirmeye gerek yoktur.


0

@cpburnz doğru anladı ama daha fazla kod için, burada daha az kod kullanarak aynı fikir var:

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 (alan adını bir dizi adı kullanarak not edin):

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

PHP için:

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

0

@ vishnu'nun cevabının jQuery sürümü.

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

JQuery 1.5 veya önceki bir sürümünü kullanıyorsanız, lütfen .prop () yerine .attr () işlevini kullanın


0

Bu çözüm, @ desw'nin çözümünden esinlenmiştir.

Giriş adlarınız "form stili" içindeyse, bir chekbox kontrol edilir edilmez chekbox değerlerinizle dizi indeksi ilişkisini kaybedersiniz ve bu "ayrışma" her chekbox kontrol edildiğinde bir birim artar. Bu, bazı alanlardan oluşan çalışanlar gibi bir şey eklemek için bir form olabilir, örneğin:

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

Bir seferde üç çalışan girmeniz ve birinci ve ikinci personelin tek olması durumunda, 5 öğeli bir sonuç elde edersiniz isSingle bekarsa, dizi elde edersiniz, böylece örneğin üç diziyi bir kerede yineleyemezsiniz. , çalışanları veritabanına ekleyin.

Bazı kolay dizi postprocessing ile bunun üstesinden gelebilirsiniz. Sunucu tarafında PHP kullanıyorum ve bunu yaptım:

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

0

Bu çözüm, bu soru için aşırıya kaçıyor, ancak bir tablodaki farklı satırlar için birçok kez meydana gelen aynı onay kutusuna sahip olduğumda bana yardımcı oldu. Ben onay kutusunu temsil satır ve ayrıca onay kutusunun durumunu (işaretli / işaretsiz) bilmek gerekiyordu.

Yaptığım şey, name özniteliğini onay kutusu girişlerimden çıkarmak, aynı sınıfın hepsini vermek ve verilerin JSON eşdeğerini tutacak gizli bir giriş oluşturmaktı.

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

Form gönderildiğinde çalıştırılacak Javascript

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

Json dizesi, formla $ _POST ["has-permissions-value"] olarak geçirilir. PHP'de, dizeyi bir diziye deşifre ettiğinizde, her bir satıra ve karşılık gelen her onay kutusu için doğru / yanlış değerine sahip ilişkilendirilebilir bir diziye sahip olursunuz. Ardından, yürürlükteki veritabanı değerleriyle karşılaştırmak ve karşılaştırmak çok kolaydır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.