javascript的全选，取消，和反选

浅笑，初夏

已于 2022-05-02 11:19:57 修改

阅读量1k

点赞数

文章标签： javascript

于 2022-04-26 16:17:53 首次发布

本文链接：https://blog.csdn.net/weixin_61614500/article/details/124430648

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选</title>
</head>
<body>
选择爱好：
<form>
    <input type="checkbox" name="c" value="a" >篮球<br>
    <input type="checkbox" name="c" value="b" >音乐<br>
    <input type="checkbox" name="c" value="c" >游泳<br>
    <input type="checkbox" name="c" value="d" >足球<br>
    <input type="button" name="bt1" size="20" value="全选" οnclick="f1()">
    <input type="button" name="bt2" size="20" value="全不选" οnclick="f2()">
    <input type="button" name="bt3" size="20" value="反选" οnclick="f3()">
</form>
<script type="text/javascript">
    var bt1 = document.getElementsByName("c");
    bt1[0].checked=false;
    function f1() {
        for (var i = 0; i < bt1.length; i++) {
            bt1[i].checked=true;
        }
    }
    function f2(){
        for (var i = 0; i < bt1.length; i++) {
            bt1[i].checked=false;
        }
    }
    function f3() {
        for (var i = 0; i < bt1.length; i++) {
            for (var i = 0; i < bt1.length; i++) {
                bt1[i].checked = !bt1[i].checked;
            }
        }
    }
</script>
</body>
</html>