×

操作表单全选、全不选、反选效果

作者:andy0012018.05.17来源:Web前端之家浏览:20648评论:0
关键词:JQueryJS

操作表单全选、全不选、反选效果。demo代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>操作表单全选、全不选、反选效果</title>
    <styletype="text/css">
    <!--
        #div1{
        width:980px;
        margin:0 auto;
        position:relative;
        text-align:left;
        padding-left:400px;
        line-height:30px;
        border:1px dotted #0075c5;
        }
        li{
        display:block;
        list-style:none;
        float:left;
        position:relative;
        padding-left:20px;
        }
        .clr{
        height:20px;
        }
    -->
    </style>
</head>
<body>
    <div id="div1">
        <div class="clr"></div>
        <!--选项开始-->
        <input type="checkbox"/>Web前端之家<br/> 
            
        <input type="checkbox"/>Web前端之家<br/> 
            
        <input type="checkbox"/>Web前端之家<br/> 
            
        <input type="checkbox"/>Web前端之家<br/> 
            
        <input type="checkbox"/>Web前端之家<br/> 
            
        <input type="checkbox"/>Web前端之家<br/> 
        <!--选项结束-->

        <!--功能按钮开始-->
        <input type="button" id="selAll" value="全选"/> 
            
        <input type="button" id="unselAll" value="全不选"/> 
            
        <input type="button" id="reverse" value="反选 "/> 
        <!--功能按钮结束-->
        <div class="clr"> </div>
    </div>
    <script src="/demo/js/jq.js"type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            
            $("#selAll").click(function () { //":checked"匹配所有的复选
                $("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之间必须有空格checked是设置选中状态。如果为true则是选中fo否则false为不选中
            });
                
            $("#unselAll").click(function () { 
                $("#div1 :checkbox").attr("checked", false); 
            });
                
            //理解用迭代原理each(function(){})
            $("#reverse").click(function () { 
                $("#div1 :checkbox").each(function () {
                    $(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判断复选框的状态:如果选中则取反
                }); 
            });
        }); 
    </script>
</body>
</html>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svg1485446400523.html

网友评论文明上网理性发言 已有0人参与

发表评论: