下拉复选框不起作用答案

【问题标题】：Drop down with checked box not working下拉复选框不起作用
【发布时间】：2015-10-14 05:27:11
【问题描述】：

<!DOCTYPE html>
<html lang="en">

<head>
</head>
    <title>test App</title>

    <!-- Bootstrap Core CSS -->
    <link href="/Project/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/Project/static/css/sb-admin.css" rel="stylesheet">
    <link href="/Project/static/css/bootstrap-multiselect.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/Project/static/lib/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script src="/Project/static/lib/js/jquery.min.js"></script>
<body>
<div >

        <ul id="ts" class="collapse">
            <select id="time-stamp" multiple="multiple">
                <option value="T1">T1</option>
                <option value="T2">T2</option>
                <option value="T3">T3</option>
                <option value="T4">T4</option>
                <option value="T5">T5</option>
            </select>
        </ul>
        <ul id="cs" class="collapse">
            <select id="chart-select" onchange="fillChart()">
                 <option value="error_info">select</option>
                 <option value="session_history">Error Info</option>
            </select>
        </ul>

</div>
<script src="/Project/static/js/jquery.js"></script>
<script src="/Project/static/js/bootstrap.min.js"></script>
<script src="/Project/static/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
        function fillChart()
        {

            var chkd = document.getElementById("time-stamp");
            var cids = [];
            for (var i=0;i<chkd.length;i++)
            {
                alert(i);
                if(chkd[i].checked)
                {
                    cids.push(chkd[i]);
                }
            }

            alert(cids);
        }
</script>

</body>
</html>

我正在尝试读取选中复选框的所有字段的文本。但是，alert(cids) 在这里给出了 null。 chkd[i].checked 总是返回 false，因为 cids.push(chkd[i]) 没有执行。我可以知道我哪里错了吗？

【问题讨论】：

你的意思是选择框？我在这里没有看到任何复选框
给你jsfiddle.net/sandenay/h7vp8z05

标签： javascript jquery html twitter-bootstrap flask

【解决方案1】：

您必须检查属性selected 而不是checked：

请更改

if(chkd[i].checked)

到

if(chkd[i].selected)

请同时查看documentation of option element。

【讨论】：

【解决方案2】：

您需要检查 selected 而不是 checked 属性。请参阅下面的 sn-p：

function fillChart() {

  var chkd = document.getElementById("time-stamp");
  var cids = [];
  for (var i = 0; i < chkd.length; i++) {
    //alert(i);
    if (chkd[i].selected) {
      cids.push(chkd[i].value);
    }
  }

  console.log(cids);
}

<select id="time-stamp" multiple="multiple">
  <option value="T1">T1</option>
  <option value="T2">T2</option>
  <option value="T3">T3</option>
  <option value="T4">T4</option>
  <option value="T5">T5</option>
</select>

<select id="chart-select" onchange="fillChart()">
  <option value="error_info">select</option>
  <option value="session_history">Error Info</option>
</select>

【讨论】：