錯誤：無法讀取屬性'檢查'未定義

Question

我試圖將選中複選框的結果存儲在本地存儲中，但是當我嘗試保存時出現上述錯誤。

不太清楚什麼是未定義的，因爲我看到了我的代碼中的屬性。 下面的代碼：

var getCheckboxValue = function(){ 
    var checkboxes = document.forms[0].features; 
    for(var i=0, j=checkboxes.length; i<j; i++){ 
     if(checkboxes[i].checked){ 
     console.log(checkboxes[i].value); 
      //featuresValue = $("features").value(); 
     }else{ 
      checkboxes = "No" 
     } 
     } 
    } 

var storeData = function(){ 
    var id = Math.floor(Math.random()*10000001); 
    //getSelectedRadio(); 
    getCheckboxValue(); 
    var item = {}; 
     item.brand = ["Brand",$("brand").value]; 
     item.model = ["Model",$("model").value]; 
     item.comments = ["comments",$("comments").value]; 
     //item.acoustic = ["acoustic", acousticValue]; 
     item.features = ["features",checkboxes]; 

    //Save data into local storage: Use Stringify to convert our object to a string 
    localStorage.setItem(id,JSON.stringify(item)); 
    alert("Contact Saved!"); 
} 


//set link & submit click events 
var save = $("button"); 
save.addEventListener("click", storeData); 

，這裏是相關的HTML：

<li>Features: 
        <ul> 
         <li><input type="checkbox" name="features" value = "Cutaway" id="cutaway" /><label for="cutaway">Cutaway</label></li> 
         <li><input type="checkbox" name="features" value = "Finished" id="finished" /><label for="finished">Finished</label></li> 
         <li><input type="checkbox" name="features" value = "Inlay" id="inlay" /><label for="inlay">Inlay</label></li> 
         <li><input type="checkbox" name="features" value = "Wide Neck" id="wneck" /><label for="wneck">Wide Neck</label></li> 
         <li><input type="checkbox" name="features" value = "Left-handed" id="lhanded" /><label for="lhanded">Left-handed</label></li> 
        </ul> 
       </li> 

另外，這裏是充分代碼的鏈接在GitHub上：

https://github.com/b80266/VFW-Project-2/blob/master/additem.html

https://github.com/b80266/VFW-Project-2/blob/master/main.js

Answer 1

問題是您所覆蓋的checkboxes值（形式複選框的原始集合）位置：

}else{ 
    checkboxes = "No" 
} 

這是內循環的 ...這是通過迭代checkboxes循環。它現在迭代字符串「No」中的字符，而不是您最初檢索的元素的集合。該字符串只有2個字符長，而原始循環的緩存值爲checkboxes.length（5個元素），存儲在j中，每次迭代都不更新，這意味着它將循環超過i = 1，訪問第三，第四和第五個索引，它們分別是現在未定義。

另一個「問題」，是在你的storeData功能，你打電話getCheckboxValue但不存儲任何地方......再後來你引用一些checkboxes變量後 - item.features = ["features",checkboxes];。您需要存儲結果，然後使用該變量。下面是這似乎與一些假設HTML工作演示：

var $ = function (id) { 
    return document.getElementById(id); 
}; 

var getCheckboxValue = function() { 
    var checkboxes = document.forms[0].features; 
    for (var i = 0, j = checkboxes.length; i < j; i++) { 
     if (checkboxes[i].checked) { 
      console.log(checkboxes[i].value + " is checked"); 
     } else { 
      //checkboxes = "No"; 
      console.log(checkboxes[i].value + " is not checked"); 
     } 
    } 
}; 

var storeData = function() { 
    var id = Math.floor(Math.random()*10000001); 
    var checkedBoxes = getCheckboxValue(); 
    var item = {}; 
    item.brand = ["Brand",$("brand").value]; 
    item.model = ["Model",$("model").value]; 
    item.comments = ["comments",$("comments").value]; 
    item.features = ["features",checkedBoxes]; 

    //Save data into local storage: Use Stringify to convert our object to a string 
    localStorage.setItem(id,JSON.stringify(item)); 
    alert("Contact Saved!"); 
}; 


//set link & submit click events 
var save = $("button"); 
save.addEventListener("click", storeData, false); 

DEMO：http://jsfiddle.net/jmUXY/1/

Answer 2

基於伊恩的建議，您可以檢查所有無線電設備在任何數量的形式。見爲例：

jQuery(document).ready(function() { 
 

 
\t $("input[type='radio']").change(function() { 
 
\t \t if (this.checked) { 
 
\t \t \t //Do stuff 
 
\t \t \t //console.log("foi clicado"); 
 
\t \t \t var marcados = 0; 
 
\t \t \t var naoMarcados = 0; 
 
\t \t \t //conta numero de checados 
 
\t \t \t var inputElems = document.getElementsByTagName("input"), 
 
\t \t \t \t count = 0; 
 
\t \t \t for (var i = 0; i < inputElems.length; i++) { 
 
\t \t \t \t if (inputElems[i].type == "radio" && inputElems[i].checked === true) { 
 
\t \t \t \t \t count++; 
 
\t \t \t \t \t marcados = count; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t naoMarcados = naoMarcados + 1; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t $("#marcados").html("Total de Marcados: " + marcados); 
 
\t \t \t $("#naomarcados").html("Total de Não Marcados: " + naoMarcados); 
 

 
\t \t } 
 
\t }); 
 
});

<script 
 
    src="https://code.jquery.com/jquery-3.2.1.js" 
 
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
    crossorigin="anonymous"></script> 
 
    <p> 
 
    FORM 1 
 
    </p> 
 
<form id="1"> 
 
<input type="radio">Em grau muito alto 
 
    <input type="radio">Em grau alto 
 
    <input type="radio">Em grau médio 
 
    <input type="radio" CHECKED>Em grau baixo 
 
    <input type="radio">Em grau muito baixo 
 
    <input type="radio">Não observo 
 
    </form> 
 
    <hr> 
 

 
    <p> 
 
    FORM 2 
 
    </p> 
 
    <form id="2"> 
 
<input type="radio">Em grau muito alto 
 
    <input type="radio">Em grau alto 
 
    <input type="radio">Em grau médio 
 
    <input type="radio">Em grau baixo 
 
    <input type="radio">Em grau muito baixo 
 
    <input type="radio">Não observo 
 
    </form> 
 
    <hr> 
 
    <div id="marcados"></div> 
 
    <div id="naomarcados"></div>