Question

我是JavaScript和jQuery的新手。我正在试图弄清楚如何获取我的复选框选中标签，最终发送到下一个网页。我还想将已检查和未选中复选框的完整列表发送到下一个网页，所以我想我只是将它们存储在一个数组中以启动，但是数组无法显示它。

此复选框列表页面的工作方式是，在用户完成检查后，他们点击按钮并捕获结果以便发送。

我启动了一个函数来执行此操作，但我正在尝试使用带有完整复选框标签列表的数组来用于显示并稍后发送。我无法让阵列显示标签名称，我不禁想到我做得不对，或者说有更好的方法。当我使用inpfields[i].value时，我正在捕获已检查的值（打开），但我确实需要检查项目的标签。当我使用inpfields[i].label时，它什么也没有返回。我也试过lblFields [i] .label，它也是空的。

我的问题是：

您建议我使用数组来使其在复选框标签中起作用吗？
如何获取已检查项目的数组以供日后使用？

我想到按下复选框处理按钮here。我正在尝试理解数组here，但还没有工作呢。我有想法使用getLabel（id）函数方法here，但它不起作用。

现在，当我按下按钮时，我会看到一个弹出窗口，上面写着[对象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>

Answer 1

我明白了。我结束了：

if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(lblFields[i].innerHTML);

感谢提示！

这就是我获得allLabels数组的方式。我不再在我的标签中使用getheading（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;
        }

如何获取已选中的复选框标签并使用数组来显示标签

1 个答案: