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的循环。它现在迭代字符串＆＃34; No＆＃34;中的字符，而不是您最初检索的元素集合。此字符串只有2个字符长，而原始循环的缓存值checkboxes.length（5个元素）存储在j中，每次迭代都不会更新，这意味着它将循环过i = 1 ，访问现在未定义的第三，第四和第五个索引。

另一个＆＃34;问题＆＃34;，就是在您的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

根据Ian的建议，您可以检查任意数量的所有无线电。见例子：

＆＃13;

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

＆＃13;

 <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>

＆＃13;

错误：无法读取未定义的属性“已检查”

2 个答案: