反选

最新推荐文章于 2025-08-23 10:29:38 发布

原创最新推荐文章于 2025-08-23 10:29:38 发布 · 448 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

98 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript实现一个简单的列表项反选功能。通过两种不同的JS方法，一种是逐个判断复选框状态并进行反转，另一种则是直接利用逻辑非操作符实现状态反转。

这里写图片描述

html：

<input type="button" value="反选">
<ul>
    <li>苹果<input type="checkbox"></li>
    <li>香蕉<input type="checkbox"></li>
    <li>橙子<input type="checkbox"></li>
    <li>桔子<input type="checkbox"></li>
    <li>葡萄<input type="checkbox"></li>
    <li>桃子<input type="checkbox"></li>
</ul>

js：
方法一：

var box = document.getElementsByTagName('input');
box[0].onclick = function(){                
    // 如果选上就去掉，如果没选上就选中
    // 点击得一个一个找，所以用for循环
    for(var i=1;i<box.length;i++){
        if(box[i].checked){//如果选中
            box[i].checked = false;//让其为假
        }else{//如果没有选中
            box[i].checked = true;//让其选中
        }
    }
}

方法二（简单）：

var box = document.getElementsByTagName('input');
box[0].onclick = function(){                
    // 如果选上就去掉，如果没选上就选中
    // 点击得一个一个找，所以用for循环
    for(var i=1;i<box.length;i++){                  
        box[i].checked = !box[i].checked;                   
    }
}