📅 最后修改于: 2023-12-03 14:51:41.275000 🧑 作者: Mango
多选是指在一组中有多个选项可以同时选择的选择器。它可以用于各种场景，例如选择电影、音乐、食品等。在Javascript中可以使用多种库和框架来实现多选，我们可以根据具体需求来选择适合自己的方案。
在Javascript中，我们可以使用HTML5中的<input>标签的type="checkbox"属性来实现多选。当用户勾选多个选项时，我们可以使用document.getElementsByName()方法来获取这些选项的值。以下是一个简单的示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="movie" value="Avengers"> Avengers<br>
<input type="checkbox" name="movie" value="Star Wars"> Star Wars<br>
<input type="checkbox" name="movie" value="Jurassic Park"> Jurassic Park<br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the selected movies will be displayed:</p>
<p id="demo"></p>
<script>
document.querySelector("form").addEventListener("submit", function(event) {
event.preventDefault();
var selected = document.getElementsByName("movie");
var values = [];
for (var i=0; i<selected.length; i++) {
if (selected[i].checked) {
values.push(selected[i].value);
}
}
document.getElementById("demo").innerHTML = "You selected: " + values.join(", ");
});
</script>
</body>
</html>
输出结果：
You selected: Avengers, Star Wars
上述代码使用addEventListener()方法来添加一个表单提交的事件监听器，当用户点击提交按钮时，代码会阻止表单的默认行为，并获取用户选择的电影。
如果您想使用更简洁的代码来实现多选，可以使用jQuery库。以下是一个使用jQuery实现的多选示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="checkbox" id="movie1" value="Avengers"> Avengers<br>
<input type="checkbox" id="movie2" value="Star Wars"> Star Wars<br>
<input type="checkbox" id="movie3" value="Jurassic Park"> Jurassic Park<br>
<button id="myBtn">Submit</button>
<p>Click the button and the selected movies will be displayed:</p>
<p id="demo"></p>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
var values = [];
$('input[type=checkbox]:checked').each(function(){
values.push($(this).val());
});
$("#demo").html("You selected: " + values.join(", "));
});
});
</script>
</body>
</html>
输出结果：
You selected: Avengers, Star Wars
上述代码使用jQuery库中的方法来实现多选。代码首先使用$(document).ready()方法来在页面加载时初始化代码，然后它使用$("myBtn").click()方法来添加一个按钮的点击事件监听器。当用户点击按钮时，代码会获取用户选择的电影，并将结果展示在页面上。
如果您正在使用Vue.js框架开发Web应用程序，您可以使用该框架提供的多选组件来实现多选。以下是一个Vue.js实现的多选示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h2>Favorite movies:</h2>
<input type="checkbox" v-model="selectedMovies" value="Avengers"> Avengers<br>
<input type="checkbox" v-model="selectedMovies" value="Star Wars"> Star Wars<br>
<input type="checkbox" v-model="selectedMovies" value="Jurassic Park"> Jurassic Park<br>
<br>
<button v-on:click="submit">Submit</button>
<p v-if="selectedMovies.length">You selected: {{ selectedMovies.join(", ") }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
selectedMovies: []
},
methods: {
submit: function() {
console.log("You selected: " + this.selectedMovies.join(", "));
}
}
});
</script>
</body>
</html>
上述代码使用Vue.js框架来实现多选。代码创建了一个Vue实例，并在页面上渲染了多个复选框。当用户选择电影时，代码使用Vue.js的v-model指令来绑定选择的值，并在点击提交按钮时展示所选电影。该代码使用Vue.js的响应式数据，当选择发生变化时会自动更新UI。
无论您使用原生Javascript、jQuery还是Vue.js，实现多选都是非常简单的。以上示例代码展示了多种实现方式，您可以根据自己的需求选择适合自己的方案。