フォームのjQuery if/elseステートメント

Question

私は2つの値をチェックするとデータベースに格納する必要があります。両方をチェックするとうまくいきます。

3番目の入力を追加する必要があり、新しい「ブランド3」のみをチェックすると、すでに「ブランド1」と「ブランド2」の最初の2つの値が消去されます。しかし、私はそう

$(function() { 
 

 
\t set_checkbox_source_values(); 
 

 
\t $('#at').submit(function(e) { 
 
\t \t set_checkbox_source_values(); 
 
\t }); 
 
\t 
 
}); 
 

 

 
function set_checkbox_source_values() { 
 
\t $(".sub_checkbox").each(function(index){ 
 
\t \t if ($(this).attr('checked')) 
 
\t \t { 
 
\t \t \t $("input[data-brand='" + $(this).attr("data-brand") + "'][type='hidden']").val("ONBOT"); 
 
\t \t \t 
 
\t \t } else { 
 
\t \t \t $("input[data-brand='" + $(this).attr("data-brand") + "'][type='hidden']").val(''); 
 
\t \t } 
 
\t }); 
 
}

<form method="POST" name="at" id="at"> 
 
     
 
     <input type="hidden" name="SOURCE_ORIG_brand1" value="" data-brand="1" /> 
 
     <input type="hidden" name="SOURCE_LAST_brand1" value="" data-brand="1" /> 
 
     <input type="hidden" name="SOURCE_ORIG_brand2" value="" data-brand="2" /> 
 
     <input type="hidden" name="SOURCE_LAST_brand2" value="" data-brand="2" /> 
 
     
 
     <input value="1617027553" data-brand="1" name="sub" type="checkbox" class="sub_checkbox" /> 
 
     <input value="1617027907" data-brand="2" name="sub" class="sub_checkbox" type="checkbox" /> 
 
\t <input name="submit" value="sumbit" /> 
 
</form>

手付かずのままにそれらの以前の値のために必要なだけ「ブランド3」の新しい値を書き込み、さらに多くを明確にするために、これは何が起こっているかです。 私はbrand1チェックボックスをチェックしてbrand2のチェックを外しを残す場合は、この問題が発生した：

Option 1

しかし、私は戻って、brand2チェックボックスをチェックして、brand1のチェックを外しを残す場合は、値がオーバーライドして、以前の値を削除しますブランド1を空にします。私は私のコードを実行する必要がどのような

は、SOURCEを投稿することです私の究極の目標は、この取得されるように、空のフィールドではなく、以前の値を上書きしないように持っている：

Result needed

Answer 1

をそれはと思われます答えは、サーバーサイドコードが空または未定義の$_POST値をどのように処理するかによって部分的に異なります。空白の値をクエリから除外できますが、値を空の文字列に設定する場合はどうすればよいでしょうか？

入力値を消去する代わりに、disabled attributeを使用して、チェックされていない値が投稿されないようにすることをお勧めします。次に、サーバー側のコードで、未送信の値をクエリから除外します。

...無効なコントロールの値はフォームと共に送信されません。以下のような

何か：

function set_checkbox_source_values() { 
    $(".sub_checkbox").each(function(index) { 
    $("input[data-brand='" + $(this).attr("data-brand") + "'][type='hidden']").prop('disabled', !this.checked); 
    }); 
} 

はここだけのデモンストレーションのために、通常のテキスト入力を使用した例です。
隠し入力を代わりに使用できます。

jQuery('input[type=checkbox]').on('change', function() { 
 
    var code = jQuery(this).data('code'); 
 
    jQuery('input[type=text][data-code=' + code + ']').prop('disabled', !this.checked); 
 
});

div { 
 
    margin: 0 0 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <input type="text" value="test1" data-code="tester1" disabled /> 
 
    <input type="checkbox" data-code="tester1" /> 
 
</div> 
 
<div> 
 
    <input type="text" value="test2" data-code="tester2" disabled /> 
 
    <input type="checkbox" data-code="tester2" /> 
 
</div> 
 
<div> 
 
    <input type="text" value="test3" data-code="tester3" disabled /> 
 
    <input type="checkbox" data-code="tester3" /> 
 
</div>