【发布时间】：2014-05-13 19:43:45
【问题描述】：
我是 JavaScript 和 jQuery 的新手。我试图弄清楚如何获取我的复选框选中的标签以最终发送到下一个网页。我还想将选中和未选中框的完整列表发送到下一个网页，所以我想我只需将它们存储在一个数组中即可开始，但该数组无法显示它。
此复选框列表页面的工作方式是，在用户完成检查后，他们点击按钮并捕获结果以发送。
我启动了一个函数来执行此操作，但我正在尝试使用一个包含复选框标签完整列表的数组，以用于显示和稍后发送。我无法让数组显示标签名称，我不禁认为我做的不对，或者有更好的方法来做到这一点。当我使用inpfields[i].value 时，我正在捕获检查值（打开），但我确实需要检查项的标签。当我使用inpfields[i].label 时，它什么也没返回。我也试过 lblFields[i].label 也是空的。
我的问题是：
- 您建议我如何处理数组以使其在复选框标签中工作？
- 如何获取选中项的数组以供以后使用？
我想到了按下复选框处理按钮here。我正在尝试理解数组here，但它还没有工作。我想到了使用 getLabel(id) 函数方法here，但它不起作用。
现在，当我按下按钮时，我会弹出一个显示 [object HTMLCollection] 的弹出窗口。
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>jQuery Michele Project</title>
<link href="css/skins/polaris/polaris.css" rel="stylesheet">
<link href="css/skins/all.css" rel="stylesheet">
<link href="css/demo/css/custom.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script src="js/icheck.js"></script>
<script>
function getHeading(var i){
var allCheckboxLabels = [Heading1, Heading2, Heading3];
document.getElement().innerHTML = allCheckboxLabels[i];
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.input').iCheck({
checkboxClass:'icheckbox_polaris',
radioClass:'iradio_polaris',
increaseArea:'10%'
});
});
</script>
<script type="text/javascript">
// Returns an array with values of the selected (checked) checkboxes in "frm"
function getSelectedChbox(frm) {
// JavaScript & jQuery Course - http://coursesweb.net/javascript/
var selchbox = []; // array that will store the value of selected checkboxes
// gets all the input tags in frm, and their number
var inpfields = frm.getElementsByTagName('input');
var lblFields = frm.getElementsByTagName('label');
//alert(lblFields);
var nr_inpfields = inpfields.length;
// traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(lblFields[i].value);
}
return selchbox;
}
$(function(){
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
});
//function getLabel(id){
// return $("#"+id).next("label").html();
//}
</script>
<style type="text/css">
ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}
</style>
</head>
<body>
<form>
<div class="skin skin-line">
<div class="arrows">
<div class="top" data-to="skin-flat"></div>
<div class="bottom" data-to="skin-polaris"></div>
</div>
</div>
<div class="skin skin-polaris">
<div class="arrows">
<div class="top" data-to="skin-line"></div>
<div class="bottom" data-to="skin-futurico"></div>
</div>
<h3>Select Items for Column Headings</h3>
<dl class="clear">
<dd class="selected">
<div class="skin-section">
<h4>Live</h4>
<ul class="list">
<li>
<input tabindex="21" type="checkbox" id="polaris-checkbox-1">
<label for="polaris-checkbox-1">getHeading(1)</label>
</li>
<li>
<input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
<label for="polaris-checkbox-2">Checkbox 2</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-3" >
<label for="polaris-checkbox-3">Checkbox 3</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-4" checked >
<label for="polaris-checkbox-4">Checkbox 4</label>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('.skin-polaris input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '20%'
});
});
</script>
</dd>
</dl>
</div>
<div id="loading">
<input type="button" value="Click" id="btntest" />
</div>
</form>
</body>
</html>
【问题讨论】：
-
这有什么魔力，您可以将变量定义为参数，并有一个方便的
getElement()函数，您甚至不需要传入选择器？ -
你能说得更清楚些吗？听起来我遗漏了一些东西......我尝试了 getElementByTagName 和 getHeading(i) 但它没有改变任何东西。我仍然看到 getHeading(1)。
-
我将代码更改为使用 lblFields[i].value 而不是函数调用，但我仍然没有得到标签文本。
标签： javascript jquery arrays checkbox