在javascript中迭代复选框
Iterating through checkboxes in javascript
我有3个HTML列表,我试图通过迭代检查哪些选项被选中,并将内部HTML传递给web服务。第一个表id="colorList"
是通过正确传递变量,但数量和一致性不是,我看不出我做错了什么。我试过创建不同的功能,但它不起作用。
下面的JavaScript代码:
function iterateCheckBoxList(listname) {
var checkBoxListId = listname;
var elementRef = document.getElementById(checkBoxListId);
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];
if (checkBoxRef.checked == true) {
var labelArray = checkBoxRef.parentNode.getElementsByTagName('span');
if (labelArray.length > 0) {
if (checkedValues.length > 0) checkedValues += ',';
checkedValues += labelArray[0].innerHTML;
}
}
}
return checkedValues;
}
function updateSymptoms() {
Parse.initialize("v9s5EdsZ4u9fSfTpr8SD0u3Xcb56nen1GWge47kV", "fjuiNrsJk3AubBY1zDfosLKDoPxzGgKlUxegxbtx");
var UsualSymptoms = Parse.Object.extend("UsualSymptoms");
var query = new Parse.Query(UsualSymptoms);
query.equalTo("PatientID", getUserID());
query.find({
success: function (results) {
var object = results[0];
object.set("SputumColour", iterateCheckBoxList("colourList"));
object.set("SputumAmount", iterateCheckBoxList("amountList"));
object.set("SputumConsistency", iterateCheckBoxList("consistencyList"));
object.save(null, {
success: function (object) {
// The object was saved successfully.
},
error: function (object, error) {
// The save failed.
// error is a Parse.Error with an error code and description.
alert('PARSE didnt work');
console.log(error);
}
});
},
error: function (error) {
alert("Error: " + error.code + " " + error.message);
}
});
}
HTML代码如下:
<div class="sputumDetails" style="display:none" id="checkboxdiv">
<h2>Colour</h2>
<ul id="colourList" class="lists">
<li><span>Clear</span>
<input id="Clear" type="checkbox" class="checkbox" />
</li>
<li><span>White</span>
<input id="White" type="checkbox" class="checkbox" />
</li>
<li><span>Yellow</span>
<input id="Yellow" type="checkbox" class="checkbox" />
</li>
<li><span>Green</span>
<input id="Green" type="checkbox" class="checkbox" />
</li>
</ul>
<h2>Consistency</h2>
<ul id="consistencyList" class="lists">
<li>Watery
<input type="checkbox" class="checkbox" />
</li>
<li>Sticky
<input type="checkbox" class="checkbox" />
</li>
</ul>
<h2>Amount</h2>
<ul id="amountList" class="lists">
<li>1 Teaspoon
<input type="checkbox" class="checkbox" />
</li>
<li>1 Eggcup
<input type="checkbox" class="checkbox" />
</li>
<li>Half a cup
<input type="checkbox" class="checkbox" />
</li>
<li>1 Cup
<input type="checkbox" class="checkbox" />
</li>
</ul>
</div>
<div id="nextSection">
<input onclick="updateSymptoms()" type="button" class="next" value="Next" />
<br/>
<br/>
<br/>
</div>
onclick
方法为按钮调用的updateSymptoms()
方法。
谢谢
这是因为您要在span中查找innerHTML。
var labelArray = checkBoxRef.parentNode.getElementsByTagName('span');
amountList
和consistencyList
内部没有span
就像你在colourList
中所做的那样,把这些标签包装在一个span标签中,你就可以了。
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 从复选框和Selects-KnockoutJS中获取值的总和
- 选中多个具有相同名称的复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 使用$.ajax发布多个复选框
- 通过在 DOJO 中迭代 JSONArray 来创建动态复选框
- javascript使用复选框迭代对象数组
- 如何使用angularjs在数据库中存储多个复选框的值(即'Y'-表示已选中,'N'-代
- 在TBodies[0]中选中的复选框.行迭代
- 如何在Struts2迭代器中显示预选的复选框
- 如何使用JQuery迭代枚举的复选框
- Jquery复选框迭代选择
- 迭代多个复选框的值,并使用jQuery将它们与单个文本输入框的值进行匹配
- 为什么不'我的php代码是否使用复选框信息来迭代我的开关
- 在JavaScript中迭代所有复选框
- 在javascript中迭代复选框