当前位置:首页 > 前端 >

jquery复选框的操作

时间:2020-06-19 23:11:52浏览:180 转载

<!DOCTYPE html>
<html>
<head>
    <title>复选框应用</title>
    <style type="text/css">
        form{
            border:1px solid #ccc;
            width:300px;
            padding:10px;
            margin:auto;
        }
    </style>
    <script type="text/javascript" src="../jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //书上如此添加按钮事件处理——问题:当单击触发了反选事件之后,再次点击“全选”、“全不选”按钮不起作用,需要按照如下修改,即使用each()方法,才可以;或者将attr()方法修改为prop()方法也可实现预期
            // $("#CheckedAll").click(function(){
            //     $("[name=items]:checkbox").attr("checked",true);//或者将attr()方法修改为prop()方法也可实现预期
            // });
            // $("#CheckedNo").click(function(){
            //     $("[name=items]:checkbox").attr("checked",false);//或者将attr()方法修改为prop()方法也可实现预期
            // });

            $("#CheckedAll").click(function(){
                $("[name=items]:checkbox").each(function(){
                    this.checked=true;
                });
            });
            $("#CheckedNo").click(function(){
                $("[name=items]:checkbox").each(function(){
                    this.checked=false;
                });
            });
            $("#CheckedRev").click(function(){
                $("[name=items]:checkbox").each(function(){
                    // $(this).attr("checked",!$(this).attr("checked"));
                    this.checked=!this.checked;
                });
            });
            $("#send").click(function(){
                var str="你选中的是:\r\n";
                $("[name=items]:checkbox").each(function(){
                    if(this.checked)
                        str+=$(this).val()+"\r\n";
                });
                alert(str);
            });
        })
    </script>
</head>
<body>
    <form>
        你爱好的运动是?<br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
        <input type="button" id="CheckedAll" value="全选"/>
        <input type="button" id="CheckedNo" value="全不选"/>
        <input type="button" id="CheckedRev" value="反选"/>
        <input type="button" id="send" value="提交"/>
    </form>
</body>
</html>


上一篇:Nginx日志记录访问者端口的配置办法
下一篇:让Json更懂中文(JSON_UNESCAPED_UNICODE)

发表评论

昵称:  验证码:

关于博主

博主

博主:BlueCode

职业:web程序

简介:2002年开始一直从事Web制作,网站运营,会PHP+MYSQL ASP+MSSQL,微信开发