javascript - ページのリロード時の隠しフィールドとチェックボックスの問題

Question

チェックボックスのあるページで作業しています。チェックボックスをクリックすると、フォームにその値が追加され、非表示フィールドが作成されます。

これは機能しますが、F5 を押すと、最初のチェックボックスが選択される代わりに、2 番目のチェックボックスが選択されます。

jQueryコードは次のとおりです。

$('input[type=checkbox]').bind('click', function(e) {
    if ($(this).is(':checked')) {
        var html = "<input type=\"hidden\" value=\""+$(this).val()+"\" />"; 
        $('.form').append(html);
    }
});

更新：この隠しフィールドを追加しないと、正常に機能します。注意してください：チェックボックスはフォームの外側にあります