bootstrap 选列的下拉菜单 全选
时间: 2023-12-15 12:06:47 浏览: 35
以下是使用Bootstrap实现选列的下拉菜单全选的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Select All Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
// 全选
$("#select-all").click(function(){
$("input[type=checkbox]").prop("checked", true);
});
// 取消全选
$("#deselect-all").click(function(){
$("input[type=checkbox]").prop("checked", false);
});
});
</script>
</head>
<body>
<div class="container">
<h2>Bootstrap Select All Example</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Select Columns
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#"><input type="checkbox"> Column 1</a></li>
<li><a href="#"><input type="checkbox"> Column 2</a></li>
<li><a href="#"><input type="checkbox"> Column 3</a></li>
<li><a href="#"><input type="checkbox"> Column 4</a></li>
<li><a href="#"><input type="checkbox"> Column 5</a></li>
<li class="divider"></li>
<li><a href="#" id="select-all">Select All</a></li>
<li><a href="#" id="deselect-all">Deselect All</a></li>
</ul>
</div>
</div>
</body>
</html>
```