javascript--全选、取消全选、反选

快来打我* 2022-09-21 13:26 234阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全选、取消多选、反选</title>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            a{
                text-decoration: none;
                color: #999999;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
    <ul>
        <li><input type="checkbox" name="ids[]" value="1">香蕉</li>
        <li><input type="checkbox" name="ids[]" value="2">苹果</li>
        <li><input type="checkbox" name="ids[]" value="3">西瓜</li>
        <li><input type="checkbox" name="ids[]" value="4">梨</li>
        <li><input type="checkbox" name="ids[]" value="5">草莓</li>
        <li><input type="checkbox" name="ids[]" value="6">葡萄</li>
    </ul>
    <a href="javascript:selectAll();">全选</a>  
    <a href="javascript:selectNull();">取消全选</a>  
    <a href="javascript:selectRev();">反选</a>
    <script>
        var all=document.getElementsByTagName("input");
        function selectAll(){
            for(var n=0;n<all.length;n++){
                all[n].checked="true";//全选为checked=1的时候为1或者true
            }
        }
        function selectNull(){
            for(var n=0;n<all.length;n++){
                all[n].checked="";//取消全选的，checked为空
            }
        }
        function selectRev(){
            for(var n=0;n<all.length;n++){
                if(all[n].checked){
                    all[n].checked="";
                }else {
                    all[n].checked="true";
    
                }
            }
        }
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 79 阅读

相关 jQuery 全选，反选，取消

阅读目录预览源码预览 ![在这里插入图片描述][de157528b1ae49dcb274f71e83869598.gif_pic_center]

浅浅的花香味﹌/ 2023年10月06日 22:14/ 0 赞/ 49 阅读

相关 javascript全选、反选

<!DOCTYPE html> <html> <head> <title>test</title> </head> <body

谁借莪１个温暖的怀抱￠/ 2022年12月29日 00:15/ 0 赞/ 187 阅读

相关 javascript--全选、取消全选、反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年09月21日 13:26/ 0 赞/ 235 阅读

相关 javascript CheckBox 全选与取消全选

看书：<input type="checkbox" name="checkbox" value=1><br> 写字：<input type="checkbox" name=

偏执的太偏执、/ 2022年06月06日 09:47/ 0 赞/ 239 阅读

相关全选取消全选

这里用到AngularJS四大特性之二----双向数据绑定注意：没写一行DOM代码！这就是ng的优点，bootstrap.css为了布局，JS代码也只是简单创建ng模块和n

爱被打了一巴掌/ 2022年06月04日 07:55/ 0 赞/ 263 阅读

相关全选反选JavaScript实现

html代码 <label for="all">全选</label><input type="checkbox" id="all"> <div id="box

Myth丶恋晨/ 2022年05月27日 12:36/ 0 赞/ 236 阅读

相关 js实现复选框的全选、取消全选、反选

思路很简单：全选：将所有复选框的checked设置为true 取消全选：将所有复选框的checked设置为false 反选：将所有选中的复选框设置为false，未选中的

朱雀/ 2022年05月18日 05:47/ 0 赞/ 416 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 280 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 548 阅读