什么是 multiple.js？
multiple.js 是一个轻量级的 JavaScript 库，用于实现多选和单选功能。它可以帮助前端开发人员在网页中快速实现复选框和单选框。
安装和使用
安装
要使用 multiple.js，您需要先安装它。可以通过 npm 进行安装，只需运行以下命令：
npm install multiple.js
引入
安装成功后，您可以通过以下方式将 multiple.js 引入到您的项目中：
<script src="node_modules/multiple.js/dist/multiple.min.js"></script>
注意，此处假定您已经将 multiple.js 安装在了 node_modules 目录下。
基本用法
多选框
要创建一个多选框，您需要在 HTML 中添加一个具有类名 .multiple-input 的 <input> 元素，如下所示：
-- -------------------- ---- ------- ------- ------ --------------- ----------------------- -- -------- ------- ------ --------------- ----------------------- -- -------- ------- ------ --------------- ----------------------- -- --------
然后，在 JavaScript 中，您可以使用以下代码初始化 multiple.js：
var checkboxes = document.querySelectorAll('.multiple-input');
var multiple = new Multiple(checkboxes);现在，您已经可以通过 multiple.getValue() 方法获取所有被选中的多选框的值，如下所示：
var values = multiple.getValue(); console.log(values); // [ '苹果', '葡萄' ]
单选框
要创建一个单选框，您需要在 HTML 中添加一个具有类名 .multiple-radio 的 <input> 元素，如下所示：
-- -------------------- ---- ------- ------- ------ ------------ ------------ ----------------------- -- -------- ------- ------ ------------ ------------ ----------------------- -- -------- ------- ------ ------------ ------------ ----------------------- -- --------
然后，在 JavaScript 中，您可以使用以下代码初始化 multiple.js：
var radios = document.querySelectorAll('.multiple-radio');
var multiple = new Multiple(radios, {
type: 'single'
});注意，此处我们使用了 type: 'single' 来指定这是一个单选框。
现在，您已经可以通过 multiple.getValue() 方法获取被选中的单选框的值，如下所示：
var value = multiple.getValue(); console.log(value); // '苹果'
结语
通过本文，您已经学会了如何使用 multiple.js 实现复选框和单选框。希望这篇文章能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35850