1

これを複数の方法で解決しようとしました。1.通常のhtmlの「チェック済み」デフォルトオプションをフォームのラジオボタンに追加するだけで、2.js関数にそれを実行させ、試行したアイデアの要点です。

問題: どのように行っても、(ユーザーが選択する前に) ラジオがデフォルトでチェックされているように指定されている場合、それ以降に行われたものはすべて (あったとしても) 正しく保存されないことがわかりました。ローカルストレージ。localStorage は最初のデフォルトの選択を保存しますが、それ以降は何も変更できません (「物理的に」別のオプションを選択した後でも)。

デフォルトの指定 (および残りの入力) を省略した場合、localStorage は完全に機能するため、localStorage が機能していることはわかっています。

フォームコード:

<label>Who is the contact person for this event?<span class="requiredtext">*</span></label>
<input type="radio" name="Contact_Person" id="Contact_Person1" value="Submitter is the contact person" onclick="contacthide()" checked required>&nbsp;I am<br />
<input type="radio" name="Contact_Person" id="Contact_Person2" value="Submitter is not the contact person" onclick="contactshow()" required>

localStorage 保存コード:

function localStoragefunctions() {
    localStorage.clear();
    if (Modernizr.localstorage) {
        //Set variable to show that data is saved
        localStorage.setItem("flag", "set");

        //Save radio and checkbox data
        $(window).bind('unload', function() {
            $('input[type=radio]').each(function() {
                localStorage.setItem('radio_' + $(this).attr('id'), JSON.stringify({ 
                    checked: this.checked
                }));
            });
        });

ユーザーが最終的な送信前に変更を加えるために戻った場合に、それを吐き出すコード:

    $(document).ready(function() {
        if (Modernizr.localstorage) {
            //Browser supports it
            if (localStorage.getItem("flag") == "set") {

$('input[type=radio]').each(function() {
                    var state = JSON.parse(localStorage.getItem('radio_' + $(this).attr('id')));
                    if (state) this.checked = state.checked;
                });

これ以外に、localStorage に格納されているすべての変数を取得し、ユーザーが完全に送信する前に最終検査のためにそれらを提示する確認ページがあります。

それは次のもので構成されています: var ContactPerson = localStorage.getItem('Contact_Person');そして、document.writehtml と変数の値を吐き出す a。繰り返しますが、デフォルトのラジオの選択肢を設定しようとしない場合、これはうまく機能します (そして、他のすべての入力タイプに対してうまく機能します)。

理想的な結果は、ユーザーの時間を節約できるように、デフォルトで最も可能性の高いラジオ ボタンの選択肢を選択することです。事前に「決定を下す」ことができるのであれば、各ラジオボタンを物理的にクリックする必要があるフォームを提示する必要はありません。

これがすべて理にかなっていることを願っています！

4

1 に答える 1

2

これは古い質問ですが、同様の問題をトラブルシューティングしており、解決策を共有したいと考えています。

localStorage アイテムを設定すると、ID 属性をキーとして使用して、無線入力とその値の両方が保存されます。

localStorage.setItem('radio_' + $(this).attr('id'), JSON.stringify({ checked: this.checked }));

これは大丈夫かもしれませんが、私は別のアプローチを取りました。そして、私は何かを見逃しているかもしれないので、コメントは大歓迎です.

代わりに$(this).attr('name')、キーを設定するために使用します。その結果、いずれかのラジオ ボタンが選択されている場合、値は同じ localStorage キーに保存されます。

私のシナリオでは、localStorage に多くの入力を格納しているため、私のソリューションは少し抽象的です。各入力で jQuery の .change() メソッドを使用して saveToLocalStorage() を呼び出しています。また、入力の値を localStorage に直接保存しています。

function saveToLocalStorage(input) {
  if ( $(input).attr('type')=='radio' ) {
    localStorage[$(input).attr('name')] = $(input).val();
  } else {
    localStorage[$(input).attr('id')] = $(input).val();
  }
}

localStorage から取得するときは、選択する前に、localStorage のキーと値のペアがラジオ入力と一致するかどうかを確認する必要がありました。それ以外の場合は、両方の無線入力を選択していました。私のシナリオでは、jQuery 1.4.4 を使用しているため、attr('checked', 'checked') になっていることに注意してください。

$('input[type=radio]').each(function() {
  var key = $(this).attr('name');
  var val = localStorage[key];
  if ( $(this).attr('name') == key && $(this).attr('value') == val ) {
    $(this).attr('checked', 'checked');
  }
});
于 2014-02-19T16:09:16.183 に答える