jQuery对form表单的操作

最新推荐文章于 2022-02-25 17:08:18 发布

社会你鑫哥

最新推荐文章于 2022-02-25 17:08:18 发布

阅读量656

点赞数

分类专栏： J2EE 文章标签： jquery

本文链接：https://blog.csdn.net/qq_36771269/article/details/78515559

版权

J2EE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#button1").click(function () {
                alert($("#name").val());
            });

            $("#button2").click(function () {
                $("#name").val("篮球");
            });

            $("#selectAll").click(function () {
                $("[name=sports]:checkbox").each(function () {
                    this.checked=true;
                })
            });

            $("#selectNo").click(function () {
                $("[name=sports]:checkbox").each(function () {
                    this.checked=false;
                });
            });

            $("#selectRev").click(function () {
                $("[name=sports]:checkbox").each(function () {
                    this.checked=!this.checked;
                });
            });

            $("#changeSpan").click(function () {
                $("#msg").html("更改内容");
            });

            $("#send").click(function () {
                $("[name=sports]:checkbox:checked").each(function () {
                    alert($(this).val());
                })
            });
        })

    </script>
</head>
<body>
    姓名:<br/>
    <input type="text" name="name" id="name" value="足球"/>
    <input type="button" id="button1" value="获得文本框的值"/>
    <input type="button" id="button2" value="修改文本框的值"/><br/>
    你最喜欢的运动:<br/>
    <input type="checkbox" name="sports" value="foot" checked>足球
    <input type="checkbox" name="sports" value="basketball"/>篮球
    <input type="checkbox" name="sports" value="badminton"/> 羽毛球
    <input type="checkbox" name="sports" value="table tennis"/>乒乓球
    <br/>
    <input type="button" id="selectAll" value="全 选"/>
    <input type="button" id="selectNo" value="全不选"/>
    <input type="button" id="selectRev" value="反 选"/>
    <input type="button" id="changeSpan" value="更改span信息"/>
    <span id="msg">msg消息</span>
    <input type="button" id="send" value="提 交"/>
    <br/>
    <br/>
    <input type="radio" name="item" value="A"> A
    <input type="radio" name="item" value="B" checked> B
    <input type="radio" name="item" value="C"> C
    <input type="radio" name="item" value="D"> D
    <input type="button" id="getLetter" value="获得单选框的值">
    <br/>
    <br/>
    <select id="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select>
    <input type="button" id="getCity" value="获得下拉框的值"/>

    <input type="button" id="add" value="增加城市"/>

    <input type="button" id="set" value="赋值找选项"/>
    <script type="text/javascript">
        $("#getLetter").click(function () {
            $("[name=item]:radio:checked").each(function () {
                alert($(this).val());
            })
        });

        $("#add").click(function () {

            $("#city").append("<option value='ln'>辽宁</option>");
            $("#city").append("<option value='jn'>吉林</option>");
        });

        $("#getCity").click(function () {
            $("#city option:selected").each(function () {
                alert(this.text);
            })
        });

        $("#set").click(function () {
            $("#city option").each(function () {
                if(this.value=='ln') {
                    this.selected=true;
                }
            })
        });

    </script>
</body>
</html>

社会你鑫哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery对form表单的操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> &
复制链接

扫一扫