値が

Question

の場合、フォームのチェックボックスをチェックし、属性を取得します。ローカルストレージに文字列として保存されているフォームがあります。私のフォームは、しかしvalueの代わりにattributeを使用するチェックボックス、ラジオボタンなどがほとんどありません。どのようにしてこのようなチェックを行い、dataSave関数のローカルストレージに正しい値を渡すことができますか？

function dataSave(){ 
    var mngrFields = {}; 
    $(".mngr-field").each(function(){ 
     if ($(".mngr-field").is("checkbox")){ 
     mngrFields[this.id] = this.attr("checked"); 
     } else { 
     // Default method to get input-text values 
     mngrFields[this.id] = this.value; 
     } 
    }); 
    localStorage.setItem('fieldString', JSON.stringify(mngrFields)); 
} 

入力テキストが値を取得するためにデフォルトの方法は、それ自身の上だけで正常に動作しているが、チェックボックスのチェックが含まれている場合、それはエラーのためにアプリケーション全体を壊します。私は同様のラジオボタンに使用することができるかもしれない良いチェッカーを構築することができますどのように

任意のアイデア？

Answer 1

一般に入力フィールドのタイプをチェックし、ラジオとチェックボックスの属性をcheckedの属性で検出するだけです。両方ともtrue/falseです。ここでは、すべての基本的なHTMLタイプの例です。

<input class="mngr-field" type="radio" id="field-01" checked> Checked radio<br> 
<input class="mngr-field" type="radio" id="field-02"> Unchecked radio<br> 
<input class="mngr-field" type="checkbox" id="field-03" checked> Checked checkbox<br> 
<input class="mngr-field" type="text" id="field-04"> Comment on how it went?<br> 
<select class="mngr-field" id="field-05"> 
    <option value="">Rate</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> Rate it<br> 
<textarea class="mngr-field" id="field-06">Area text</textarea><br> 
<input type="button" value="Save to LS" onclick="dataSave()"> 
<script> 
    function dataSave() { 
     var mngrFields = {}; 
     $('.mngr-field').each(function() { 
      if(this.type == 'radio' || this.type =='checkbox') 
       mngrFields[this.id] = this.checked; 
      else 
       mngrFields[this.id] = this.value; 
     }); 
     localStorage.setItem('fieldString', JSON.stringify(mngrFields)); 
     console.log(JSON.parse(localStorage.getItem('fieldString'))); 
    } 
</script> 

コンソールログ出力：

Object {field-01: true, field-02: false, field-03: true, field-04: "Input text", field-05: "2", "field-06":"Area text"} 
    field-01: true 
    field-02: false 
    field-03: true 
    field-04: "Input text" 
    field-05: "2" 
    field-06: "Area text" 

私はあなたがそれ以降のlocalStorage文字列を続行する方法を知っていると確信しています。 :)

Answer 2

この行if ($(".mngr-field").is("checkbox")){が犯人であると思われます。 jQuery isは、要素とセレクタとの適合性をチェックし、"checkbox"はチェックボックスの有効なセレクタではないようです。代わりにif ($(".mngr-field").is(":checkbox")){を試してください。