黑马程序员技术交流社区

标题: 【上海校区】案例-使用prop方法完成全选-全不选-反选 [打印本页]

作者: 爱编码的J    时间: 2019-2-28 11:38
标题: 【上海校区】案例-使用prop方法完成全选-全不选-反选
一般属性值为truefalse的时候,建议直接使用prop方法来控制。
主要应用于单选框、复选框的checked属性,下拉框的selected属性和disabled等选中状态。
代码如下:
[HTML] 纯文本查看 复制代码
<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="./jquery.min.js"></script>
</head>
<body>
        爱好: <input type="checkbox" name="hobby[]">足球
                  <input type="checkbox" name="hobby[]">篮球
                  <input type="checkbox" name="hobby[]">乒乓球
                  <input type="checkbox" name="hobby[]">保龄球
                  <input type="checkbox" name="hobby[]">羽毛球
                  <input type="checkbox" name="hobby[]">排球
                  <br>
        <button id="btn">全选</button>
        <button id="btn1">全不选</button>
        <button id="btn2">反选</button>
        <script>
                //设置文本输入框不可用,设置能够使用就将true改成false
                $("input[type='text']").prop("disabled",true);
                $("#btn").click(function(){
                        $("input[type='checkbox']").prop('checked',true);
                });
                $("#btn1").click(function(){
                        $("input[name='hobby[]']").prop("checked",false);
                });
                $("#btn2").click(function(){
                        var lis=$("input[type='checkbox']");
                        for(var i=0,sum=lis.length;i<sum;i++){
                                $(lis).prop('checked',!$(lis).prop('checked'));
                        }
                });
        </script>
</body>
</html>

效果:






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2