带有选择所有复选框的多选下拉菜单
Posted
技术标签:
【中文标题】带有选择所有复选框的多选下拉菜单【英文标题】：multiselect drop down with select all checkboxes 【发布时间】：2021-09-01 22:37:54 【问题描述】：我有 jquery 脚本
script src="~/Scripts/jquery-3.4.1.min.js">script
然后我添加了多选 jquery 插件
link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
rel="stylesheet" type="text/css" /
script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
type="text/javascript"></script
但我得到了错误
$(...).multiselect 不是函数
如何添加jquery插件？
【问题讨论】：
【参考方案1】：你是否包含了一个函数？ Bootstrap 和 jquery 位于代码的头部。
type="text/javascript"
$(document).ready(function()
$('#select_all').on('click',function()
if(this.checked)
$('.checkbox').each(function()
this.checked = true;
);
else
$('.checkbox').each(function()
this.checked = false;
);
);
$('.checkbox').on('click',function()
if($('.checkbox:checked').length == $('.checkbox').length)
$('#select_all').prop('checked',true);
else
$('#select_all').prop('checked',false);
);
);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="main">
<li><input type="checkbox" id="select_all" /> Select all</li>
<ul>
<li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
<li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
<li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
<li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
<li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
</ul>
</ul>
</body>
</html>【讨论】：
以上是关于带有选择所有复选框的多选下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章
使用带复选框的多选下拉菜单搜索或过滤 jquery 数据表中的列
带有 jquery-1.4.2.min.js 的搜索框插件的多选下拉菜单
在 s-s-rS 报告中使用级联多选下拉菜单时，取消选中所有复选框不起作用