如何获取待选中的复选框标签，并使用数组显示标签
How to obtain the checkbox label for checked and use array to display labels
我是JavaScript和jQuery的新手。我试图弄清楚如何获得我的复选框被选中的标签，最终发送到下一个网页。我还想发送复选框和非复选框的完整列表到下一个网页，所以我想我只是把它们存储在一个数组开始，但数组不工作，以显示它。
这个复选框列表页面的工作方式是，在用户完成检查后，他们点击按钮，结果被捕获并发送。
我开始一个函数来做到这一点，但我试图使用一个数组与复选框标签的完整列表用于显示，并在以后发送。我在让数组显示标签名称时遇到了麻烦，我不禁认为我做得不对，或者有更好的方法来做。当我使用inpfields[i].value时，我正在捕获选中的值(on)，但我确实需要选中项目的标签。当我使用inpfields[i].label时，它什么也没返回。我还尝试了lblFields[I]。标签，也是空的
我的问题是:
- 你建议我用数组做什么来让它在复选框标签中工作?
- 我如何获得检查项的数组供以后使用?
我在这里得到了按下复选框处理按钮的想法。我在试着理解数组，但还没有让它工作。我想在这里使用getLabel(id)函数方法，但它不起作用。
现在，当我点击我的按钮，我得到一个弹出框上面写着[objecthtmlcollection]。
<!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>
我明白了。我最终使用:
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(lblFields[i].innerHTML);
谢谢你的提示!
这就是我如何得到一个数组的allLabels。我不再在标签中使用getheheading (I)了。我只是用文本作为标签，把名字拉到一个数组中，然后我将弄清楚如何将数组发送到下一个网页。
function getSelectedChbox(frm) {
// JavaScript & jQuery Course - http://coursesweb.net/javascript/
var selchbox = []; // array that will store the value of selected checkboxes
var allLabels = []; // array to store value of all checkboxes, selected and not
// gets all the input tags in frm, and their number
var inpfields = frm.getElementsByTagName('input');
var lblFields = frm.getElementsByTagName('label');
var allLabelFields = frm.getElementsByTagName('label').innerHTML;
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].innerHTML);
if(inpfields[i].type == 'checkbox') allLabels.push(lblFields[i].innerHTML);
}
alert(allLabels);
return selchbox;
}
相关文章：
- 在GridView中，当单击复选框时，在网格的同一行中使用JavaScript将标签中的值添加到TextBox
- Dojo复选框标签
- 将函数事件绑定到更改函数的复选框/标签
- 添加复选框标签中的值
- 如何捕获“UL”标签中的复选框值
- 添加和更改复选框名称+更改时的标签
- 如果在使用IE 7或8时隐藏，则单击标签不选中复选框
- 更改聚焦时的标签背景颜色复选框
- 如何通过选择复选框和下拉列表用Javascript更改标签值
- 如果选中，请更改复选框的标签css类
- 如何在动态生成的表中修改复选框的标签
- 单击标签，如果复选框道具检查为真
- 标签标签中的复选框:Chrome和Firefox中的不同结果
- 使用 JS 或 Jquery 将复选框和无线电中的值添加到标签中
- 在 ios 应用加速器中创建带有标签的复选框
- 选中所有复选框 未选中标签中包含图像的所有复选框
- 如何在 MVC 应用程序中单击标签时选中所有复选框
- 隐藏Zend单选按钮和复选框标签在javascript点击处理程序中
- 如何更改输入标签之间的文本，并将标签复选框和图标对齐在一行上
- 当输入标签复选框被选中时显示文本
