如何使用javaScript进行多选

How to do multiple selection with javaScript

本文关键字：何使用 javaScript 更新时间：2024-05-27

我正在尝试用JavaScript进行多选。但不能工作。我该怎么修？我是按照的方式做的

 var expanded = false;
        function showCheckboxes() {
            var checkboxes = document.getElementById("checkboxes");
            if (!expanded) {
                checkboxes.style.display = "block";
                expanded = true;
            } else {
                checkboxes.style.display = "none";
                expanded = false;
            }
        }

.multiselect {
            width: 200px;
        }
        .selectBox {
            position: relative;
        }
        .selectBox select {
            width: 100%;
            font-weight: bold;
        }
        .overSelect {
            position: absolute;
            left: 0; right: 0; top: 0; bottom: 0;
        }
        #checkboxes {
            display: none;
            border: 1px #dadada solid;
        }
        #checkboxes label {
            display: block;
        }
        #checkboxes label:hover {
            background-color: #1e90ff;
        }

<div class="multiselect">
                <div class="selectBox" onclick="showCheckboxes()">
                    <select>
                        <option>check box1</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div id="checkboxes">
                    <label for="one"><input type="checkbox" id="one" />First checkbox</label>
                </div>
            </div>
<div class="multiselect">
                <div class="selectBox" onclick="showCheckboxes()">
                    <select>
                        <option>check box2</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div id="checkboxes">
                    <label for="one"><input type="checkbox" id="one" />First checkbox</label>
                </div>
            </div>
<div class="multiselect">
                <div class="selectBox" onclick="showCheckboxes()">
                    <select>
                        <option>check box3</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div id="checkboxes">
                    <label for="one"><input type="checkbox" id="one" />First checkbox</label>
                </div>
            </div>

多个元素不能有相同的id。这是无效的。然而，当您调用getElementById()时，将使用1st元素。这就是为什么在您的示例中只有1st元素展开和折叠。

这是一个例子。在这个例子中，我将一个参数传递给showCheckboxes方法。这样我们就可以选择正确的checkboxes。我们还必须单独存储3个元素的状态。

https://jsfiddle.net/93894gbs/5/

js

var expanded = [false, false, false];
var checkboxes;
function showCheckboxes(i) {
  checkboxes = checkboxes || document.getElementsByClassName("checkboxes");
  if (!expanded[i]) {
    checkboxes[i].style.display = "block";
    expanded[i] = true;
  } else {
    checkboxes[i].style.display = "none";
    expanded[i] = false;
  }
}

您还可以在调用处理程序时传递"event"属性，如：

div class="selectBox"onclick="showCheckboxes（event）"

并更改javascript，如：

var expanded = false;
function showCheckboxes(ev) {
    console.log("ev", ev);
    var checkboxes = ev.currentTarget.parentElement.lastElementChild;
    if (!expanded) {
        checkboxes.style.display = "block";
        expanded = true;
    } else {
        checkboxes.style.display = "none";
        expanded = false;
    }
}