全选反选案例（html)

在HTML中实现全选和反选功能，通常涉及到JavaScript的使用。以下是一个简单的全选和反选的案例：

<!DOCTYPE html>
<html>
<head>
    <title>全选与反选案例</title>
    <script type="text/javascript">
        function selectAll(checked) {
            var items = document.getElementsByName('item');
            for (var i = 0; i < items.length; i++) {
                items[i].checked = checked;
            }
        }
        
        function inverseSelect() {
            var items = document.getElementsByName('item');
            for (var i = 0; i < items.length; i++) {
                items[i].checked = !items[i].checked;
            }
        }
    </script>
</head>
<body>
    <h2>请选择你喜欢的水果：</h2>
    <input type="checkbox" onclick="selectAll(this.checked)" /> 全选/取消全选<br />
    <input type="checkbox" name="item" value="apple" /> 苹果<br />
    <input type="checkbox" name="item" value="banana" /> 香蕉<br />
    <input type="checkbox" name="item" value="orange" /> 橙子<br />
    <button onclick="inverseSelect()">反选</button>
</body>
</html>

在这个例子中，我们定义了两个函数：selectAll 和 inverseSelect。selectAll 函数用于实现全选或取消全选的功能，它接受一个布尔值参数 checked，表示是否选中所有的复选框。inverseSelect 函数用于实现反选的功能，即遍历所有的复选框，并将它们的选中状态取反。

在HTML部分，我们定义了一个全选/取消全选的复选框，并在其 onclick 事件中调用 selectAll 函数，传入当前复选框的选中状态。同时，我们还定义了几个表示水果的复选框，它们的 name 属性都设置为 item，以便在JavaScript中通过 getElementsByName 方法获取到它们。最后，我们定义了一个按钮，用于触发反选功能，其在 onclick 事件中调用 inverseSelect 函数。

全选反选案例（html)

评论已关闭

推荐阅读