jquery实现多选框包括全选
时间: 2023-03-28 12:03:57 浏览: 96
可以使用以下代码实现:
HTML代码:
```
<input type="checkbox" id="checkAll">全选
<input type="checkbox" name="checkItem" class="checkItem">选项1
<input type="checkbox" name="checkItem" class="checkItem">选项2
<input type="checkbox" name="checkItem" class="checkItem">选项3
```
jQuery代码:
```
$(function(){
//全选
$("#checkAll").click(function(){
$(".checkItem").prop("checked", this.checked);
});
//单选
$(".checkItem").click(function(){
var flag = true;
$(".checkItem").each(function(){
if(!this.checked){
flag = false;
}
});
$("#checkAll").prop("checked", flag);
});
});
```
相关问题
jquery实现多选框全选
以下是使用jQuery实现多选框全选的代码:
```javascript
// 给全选按钮绑定点击事件
$("#checkAll").click(function(){
// 获取全选按钮的状态
var status = $(this).prop("checked");
// 将所有的多选框的状态设置为与全选按钮相同
$("input[type='checkbox']").prop("checked", status);
});
// 给每个多选框绑定点击事件
$("input[type='checkbox']").click(function(){
// 获取所有多选框的数量
var total = $("input[type='checkbox']").length;
// 获取已选中的多选框的数量
var checkedNum = $("input[type='checkbox']:checked").length;
// 如果已选中的多选框的数量等于所有多选框的数量,则将全选按钮的状态设置为选中,否则设置为未选中
if(checkedNum == total){
$("#checkAll").prop("checked", true);
}else{
$("#checkAll").prop("checked", false);
}
});
```
实现多选框的全选全不选返选
可以使用 JavaScript 实现多选框的全选全不选返选功能,代码如下:
```javascript
// 获取全选按钮和所有选项框
const selectAll = document.getElementById('select-all');
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// 给全选按钮添加事件监听器
selectAll.addEventListener('change', function() {
checkboxes.forEach(function(checkbox) {
checkbox.checked = selectAll.checked;
});
});
// 给每个选项框添加事件监听器
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
// 如果所有选项框都已选中,则将全选按钮状态改为已选中
selectAll.checked = [...checkboxes].every(function(checkbox) {
return checkbox.checked;
});
});
});
```
这段代码将全选按钮与所有选项框绑定,当全选按钮选中时,所有选项框也将被选中;当某个选项框取消选中时,如果所有选项框都已选中,则将全选按钮状态改为已选中。