未チェックのHTMLチェックボックスのPOST

デフォルトでチェックされているチェックボックスがたくさんあります。私のユーザーはおそらくいくつかのチェックボックスを（もしあれば）チェックを外し、残りはチェックしたままにするでしょう。

されているチェックボックスフォームのPOSTを作るためにどのような方法がありませんというものより、確認されているチェックしますか？

チェックボックスの非表示の入力を別のIDで追加します。

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

フォームを送信する前に、チェックされた条件に基づいて非表示の入力を無効にします。

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

私がこれまでで最も気に入った解決策は、チェックされていない可能性があるチェックボックスと同じ名前の非表示の入力を配置することです。チェックボックスがチェックされていない場合、非表示の入力は引き続き成功してサーバーに送信されますが、チェックボックスがチェックされている場合は、その前の非表示の入力をオーバーライドするように機能すると思います。このようにして、ポストされたデータのどの値がチェックボックスから取得されると予想されていたかを追跡する必要はありません。

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

バニラJavaScriptを使用して解決しました。

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

この2つの入力要素の間にスペースや改行を入れないように注意してください。

を使用this.previousSibling.previousSiblingして「上位」要素を取得できます。

PHPでは、名前付き非表示フィールドの0（設定されていない）または1（設定されている）を確認できます。

私の個人的なお気に入りは、チェックボックスがオフの場合に使用されるのと同じ名前の非表示フィールドを追加することです。しかし、解決策は思ったほど簡単ではありません。

このコードを追加した場合：

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

ブラウザはあなたがここで何をするかを本当に気にしません。ブラウザは両方のパラメータをサーバーに送信し、サーバーはそれらをどのように処理するかを決定する必要があります。

たとえば、PHPは最後の値を使用する値として使用します（参照：重複するHTTP GETクエリキーの信頼できる位置）

しかし、私が使用した他のシステム（Javaベース）はそれを回避します-彼らはあなたに最初の価値しか提供しません。.NETは代わりに両方の要素を含む配列を提供します

いつか、node.js、Python、Perlでこれをテストしてみます。

これに関する一般的なテクニックは、各チェックボックスとともに非表示の変数を運ぶことです。

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

サーバー側では、最初に非表示変数のリストを検出し、各非表示変数について、対応するチェックボックスエントリがフォームデータで送信されているかどうかを確認します。

サーバー側のアルゴリズムはおそらく次のようになります。

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

上記は質問に正確に答えるものではありませんが、同様の機能を実現するための代替手段を提供します。

すべてのチェックボックスに非表示フィールドを作成する必要はありません。コードをコピーするだけです。それがチェックされていない場合は、チェックボックスの値を変更しますvalue割り当てます0チェックボックスが割り当て、その後チェックするとと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');
        }
    })
})

$('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>

チェックボックスの名前を省略すると、渡されません。test_checkbox配列のみ。

フォームの送信イベントでJavascriptを実行できます。それがあなたができるすべてですが、ブラウザがこれを自分で行うようにする方法はありません。また、JavaScriptを使用していないユーザーのフォームが機能しなくなります。サーバー上にどのチェックボックスが存在するかを知ることをお勧めします。そのため、投稿されたフォーム値（$_POSTPHPの場合）に存在しないチェックボックスがオフになっていると推測できます。

実際には次のようにします。

チェックボックス入力と同じ名前の非表示の入力フィールドがある

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

そして投稿したら、最初に$ _POST配列で取得した重複値を削除します。これにより、一意の値がそれぞれ表示されます。

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

私は投稿からこれを取得し、配列から重複した値を削除しました

「私はサーバーアプローチを採用しました。正常に動作するようです-おかげで。– Reach4thelasers 09年1月1日15:19」所有者から勧めたいと思います。引用通り：javascriptソリューションはサーバーハンドラーの方法に依存します（私はチェックしませんでした）

といった

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

私はこの質問が3歳であることを知っていますが、かなりうまくいくと思う解決策を見つけました。

$ _POST変数が割り当てられているかどうかを確認して、変数に保存できます。

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

isset（）関数は、$ _ POST変数が割り当てられているかどうかを確認します。ロジックによって割り当てられていない場合、チェックボックスはチェックされません。

ここでの回答のほとんどは、JavaScriptまたは重複する入力コントロールの使用を必要とします。場合によっては、これを完全にサーバー側で処理する必要があります。

この一般的な問題を解決するための（意図された）キーは、フォームの送信入力コントロールであると思います。

チェックボックスのチェックされていない値を正しく解釈して処理するには、次の知識が必要です。

1. チェックボックスの名前
2. フォームの送信入力要素の名前

フォームが送信されたかどうか（値が送信入力要素に割り当てられているかどうか）をチェックすることにより、チェックされていないチェックボックスの値を想定できます。。

例えば：

<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を使用する場合、チェックされたチェックボックスを検出するのはかなり簡単です。

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

?>

初期データはページの読み込みごとに読み込むことができますが、フォームが送信された場合にのみ変更する必要があります。チェックボックスの名前は事前にわかっているため、個別にたどって検査することができます。そのため、個々の値がない場合は、チェックされていないことを示します。

私は最初にサムのバージョンを試しました。良いアイデアですが、同じ名前のフォームに複数の要素が存在する原因になります。名前に基づいて要素を検索するJavaScriptを使用すると、要素の配列が返されます。

私はPHPでShaileshのアイデアを理解しました。これが私のコードです：

/ *オリジナルが存在する場合は「.hidden」フィールドを削除し、存在しない場合は「.hidden」値を使用します。* /
foreach（$ _POST ['frmmain'] as $ field_name => $ value）
{
    //「.hidden」で終わる要素のみを確認します
    if（！substr（$ field_name、-strlen（ '。hidden'）））{
        ブレーク;
    }

    // '.hidden'なしで名前を取得します
    $ real_name = substr（$ key、strlen（$ field_name）-strlen（ '。hidden'））;

    //オリジナルが存在しない場合、「。hidden」の値を使用して「偽の」オリジナルフィールドを作成します
    if（！array_key_exists（$ real_name、$ POST_copy））{
        $ _POST [$ real_name] = $ value;
    }

    // '.hidden'要素を削除します
    unset（$ _ POST [$ field_name]）;
}

また、JavaScriptを使用することは少しハックに思える追加の入力フィールドを投稿するというソリューションも気に入っています。

バックエンドに何を使用するかに応じて、どの入力が最初に送信されるかによって異なります。

最初のオカレンスが使用されるサーバーバックエンド（JSP）の場合は、次の操作を行う必要があります。

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

最後のオカレンスが使用されるサーバーバックエンド（PHP、Rails）の場合は、次の操作を行う必要があります。

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

すべてのオカレンスがリストデータタイプ（[]、array）に格納されているサーバーバックエンドの場合。（Python / Zope）

好きな順序で投稿できcheckboxます。type属性を使用して、入力から値を取得する必要があります。したがって、チェックボックスが非表示要素の前にある場合はリストの最初のインデックス、チェックボックスが非表示要素の後にある場合は最後のインデックス。

すべての出現箇所がカンマで連結されているサーバーバックエンドの場合（ASP.NET / IIS）リストデータタイプを作成するには、カンマを区切り文字として使用して文字列を（分割/分解）する必要があります。（[]）

チェックボックスが非表示要素の前にある場合はリストの最初のインデックスを取得し、チェックボックスが非表示要素の後にある場合は最後のインデックスを取得することができます。

画像ソース

私は、jQueryのこのブロックを使用します。これにより、送信時に非チェックのすべてのチェックボックスに非表示の入力が追加されます。これは、マークアップを乱雑にしたり、後で追加するチェックボックスでの実行を忘れたりするリスクを冒すことなく、常にすべてのチェックボックスに送信される値を常に取得することを保証します。また、使用しているバックエンドスタック（PHP、Rubyなど）に依存しません。

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

また、form.submitイベントをインターセプトして、送信前に逆チェックすることもできます。

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

この質問は古くて答えがたくさんあるようですが、とにかくペニーをあげます。一部の人が指摘したように、私の投票はフォームの「送信」イベントのJavaScriptソリューションに対するものです。入力を2倍にしない（特に、phpコードがhtmlと混合された長い名前と属性がある場合）、サーバー側を煩わせない（すべてのフィールド名を確認して1つずつチェックする必要がある）、チェックされていないすべてのアイテムをフェッチするだけ、それらに0の値（または「チェックされていない」ステータスを示すために必要なもの）を割り当て、属性の「チェックされた」を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;
});

これにより、次のような$ _POST配列が作成されます。

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

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

私がしたことは少し違っていました。まず、チェックされていないすべてのチェックボックスの値を変更しました。「0」にすると、すべて選択され、値が送信されます。

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

$ _POSTを照合したい

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

POSTに「checkboxname」の値がない場合は、チェックされていないため、値を割り当てます。

チェックボックス値の配列を作成し、値が存在するかどうかをチェックする関数を作成できます。存在しない場合は、チェックされていないことを気にして値を割り当てることができます

Ajaxアクションの例は.val（）;の代わりにjQueryを使用しています（ '：checked'）。

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

paramsはTRUEまたはFALSEで値を取得します。

チェックボックスは通常、データベースに格納されているバイナリデータを、Yes / No、Y / N、または1/0の値として表します。HTMLチェックボックスは、チェックボックスがチェックされている場合にのみサーバーに値を送信するという性質が悪いです！つまり、他のサイトのサーバースクリプトは、正の値（チェック済み）または負の値（チェックされていない）を格納できるようにするために、Webページのすべての可能なチェックボックスを事前に知っている必要があります。実際には、負の値のみが問題です（ユーザーが以前に（事前に）チェックした値のチェックを外した場合-この名前を送信する必要があることを事前に知らなければ、何も送信されないときにサーバーはこれをどのようにして知ることができますか）。UPDATEスクリプトを動的に作成するサーバー側スクリプトがある場合、チェック済みのY値と未チェック（未受信）のN値を設定するために受信する必要があるすべてのチェックボックスがわからないため、問題があります。

値「Y」と「N」をデータベースに格納し、ページのチェックボックスと非チェックボックスを使用してそれらを表すため、「Y」と「N」の値を持つ各値（チェックボックス）の非表示フィールドを追加し、視覚的にのみチェックボックスを使用します表現し、単純なJavaScript関数check（）を使用して、選択に従ってifの値を設定します。

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

1つのJavaScript onclickリスナーを使用して、私のWebページの各チェックボックスに対して関数check（）を呼び出します。

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

このように、「Y」または「N」の値は常にサーバー側スクリプトに送信され、更新する必要があるフィールドを認識しており、チェックボックスの「オン」の値を「Y」に変換したり、受け取っていないチェックボックスを「N」に変換したりする必要がありません。 '。

注：空白または改行も兄弟なので、ここでは.previousSibling.previousSibling.valueが必要です。間にスペースがない場合は、.previousSibling.valueのみ

以前のように明示的にonclickリスナーを追加する必要はありません。jQueryライブラリを使用して、ページ内のすべてのチェックボックスの値を変更する関数で動的にクリックリスナーを追加できます。

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

すべての回答は素晴らしいですが、同じ名前のフォームに複数のチェックボックスがあり、各チェックボックスのステータスを投稿したい場合。次に、チェックボックス（必要なものに関連する名前）を含む非表示フィールドを配置することで、この問題を解決しました。

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

次に、jqueryコードの下でチェックボックスの変更ステータスを制御します。

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

チェックボックスを変更すると、関連する非表示フィールドの値が変更されます。サーバーでは、チェックボックスではなく非表示のフィールドのみを確​​認できます。

これが誰かがこの種の問題を抱えているのを助けることを願っています。応援:)

チェックボックスの問題は、チェックされていない場合、フォームに投稿されないことです。チェックボックスをオンにしてフォームを投稿すると、フォームの処理に使用できる$ _POST変数のチェックボックスの値が取得されます。チェックされていない場合、$ _ POST変数に値は追加されません。

PHPでは、通常、チェックボックス要素でisset（）チェックを行うことでこの問題を回避します。予期している要素が$ _POST変数に設定されていない場合、チェックボックスがオフになっていて、値がfalseである可能性があります。

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

ただし、動的フォームを作成した場合、チェックボックスの名前属性が常にわかるとは限りません。チェックボックスの名前がわからない場合、isset関数を使用して、これが送信されたかどうかを確認することはできません。 $ _POST変数。

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

より良い回避策があります。まず、チェックされているチェックボックスのみに名前属性を提供します。次に、クリックsubmitすると、JavaScript functionを介して、チェックされていないすべてのボックスがオンになります。だから、あなたsubmitがform collectionそれらを持っているとき、それらだけがname財産を持っている人で検索されます。

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

利点： 隠しボックスを作成したり、操作したりする必要がありません。

@cpburnzはそれを正しく理解しましたが、多くのコードにとって、これはより少ないコードを使用した同じアイデアです：

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（配列名を使用したフィールド名に注意）：

<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の場合：

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

@vishnuの回答のjQueryバージョン。

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

jQuery 1.5以下を使用している場合は、.prop（）ではなく.attr（）関数を使用してください。

このソリューションは、@ deswのソリューションに触発されています。

入力名が「フォームスタイル」の場合、1つのチェックボックスがチェックされるとすぐに、チェックボックス値との配列インデックスの関連付けが失われ、チェックボックスがチェックされるたびにこの「関連付け」が1単位ずつ増加します。これは、たとえば、いくつかのフィールドで構成された従業員のようなものを挿入するフォームの場合です。

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

一度に3人の従業員を挿入し、最初と2番目の従業員が単一の場合、5つの要素になります。 isSingle配列になるので、たとえば、 、データベースに従業員を挿入します。

簡単な配列後処理でこれを克服できます。私はサーバーサイドでPHPを使用しており、これを行いました：

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

したがって、この解決策はこの質問に対してはやり過ぎですが、テーブル内の異なる行に対して何度も発生する同じチェックボックスがあったときに役に立ちました。チェックボックスが表す行と、チェックボックスの状態（オン/オフ）を知る必要がありました。

私が行ったのは、チェックボックスの入力から名前属性を取り除き、それらにすべて同じクラスを与え、データに相当するJSONを保持する非表示の入力を作成することでした。

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

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文字列は、$ _ POST ["has-permissions-values"]の形式で渡されます。PHPでは、文字列を配列にデコードすると、各行と対応する各チェックボックスのtrue / false値を持つ連想配列ができます。その後、ウォークスルーして現在のデータベース値と比較するのは非常に簡単です。