当前位置：首页 > 前端 >

jquery复选框的操作

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

<!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，微信开发

Linux文章
PHP文章
随机文章

BlueCode的自留地

jquery复选框的操作

关于博主