JavaScript全选、反选与全不选脚本实现

反选、全选

需积分: 32 51 浏览量更新于2024-09-11 收藏 2KB TXT 举报

身份认证购VIP最低享 7 折!

30元优惠券

"这篇资源提供了一段JavaScript代码，用于实现全选、反选和全不选的功能，适用于处理一组复选框（checkboxes）的选择状态。" 在这段JavaScript代码中，有两个主要的函数：`xuanxiang` 和 `fangxuan`。这两个函数都是用来操作HTML中的复选框元素，改变它们的选中状态。 1. `xuanxiang(arr1, arr2)` 函数：这个函数用于全选或全不选一个复选框数组。`arr1` 参数代表需要处理的复选框数组，而 `arr2` 是一个特定的复选框，通常用作全选/全不选的触发器。如果 `arr2` 被选中（checked状态为true），则所有 `arr1` 中的复选框都将被选中。如果 `arr2` 未被选中，那么所有 `arr1` 中的复选框将被取消选中。 - 首先，函数获取 `arr1` 的引用，并检查其长度是否大于0。如果长度大于0，它将遍历数组并把每个复选框的 `checked` 属性设置为 `true`，实现全选。 - 接着，如果 `arr2` 未被选中，函数会再次遍历 `arr1`，把所有复选框的 `checked` 属性设为 `false`，实现全不选。 2. `fangxuan(arr)` 函数：这个函数用于实现反选功能。`arr` 参数代表需要处理的复选框数组。函数会遍历整个数组，如果当前复选框已被选中，则取消选中；如果未被选中，则将其选中，从而达到反选的效果。 - 函数首先获取 `arr` 的引用，然后遍历数组。对于每个元素，如果 `checked` 属性为 `true`，则将其设为 `false`，反之则设为 `true`。这段代码可以嵌入到HTML文档的 `<head>` 标签内，与HTML表格中的复选框交互。例如，在给定的部分内容中，有一个表格包含两个带有相同名字的复选框（`name="checkbox"`）。这些复选框可以通过调用这些JavaScript函数来控制它们的选中状态。在实际应用中，通常会将触发全选/全不选的复选框ID绑定到 `arr2`，例如 `id="checkbox"` 的那个，而其他复选框（如表格中的那些）则构成 `arr1`。通过事件监听（如点击事件）可以触发这些函数，使用户能够方便地进行批量选择操作。

资源详情

资源推荐

<head>
<script language="javascript">
function xuanxiang(arr1,arr2){
var xx=arr1;
if(xx.length>0){
for(var i=0;i<xx.length;i++){
xx[i].checked=true;
}
if(arr2.checked==false){
for(var j=0;j<xx.length;j++){
xx[j].checked=false;
}
}
}
}
function fangxuan(arr){
var fx=arr;
for(var i=0;i<fx.length;i++){
if(fx[i].checked==true){
fx[i].checked=false;
}
else{
fx[i].checked=true;
}
}
}
</script>
</head>

<body>

下载后可阅读完整内容，剩余2页未读，立即下载