Jquery(九)

最新推荐文章于 2025-06-14 13:20:49 发布

海绵娃娃

最新推荐文章于 2025-06-14 13:20:49 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/oneqinglong/article/details/71126852

本文介绍了一个使用jQuery统计HTML表单中各种类型输入元素数量的方法。通过简单的jQuery选择器和DOM操作，可以轻松获取文本框、密码框、单选按钮、复选框等的数量，并在页面上显示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>jQuery表单选择器
 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function(){

        //获取文本框的个数
        var textLength=$("#form1 :text").length;
        //获取密码框的个数
        var pLength=$("#form1 :password").length;
        //获取单选按钮的个数
        var rLength=$("#form1 :radio").length;
        //获取复选框的个数
        var cLength=$("#form1 :checkbox").length;
        //获取文本域的个数
        var fLength=$("#form1 :file").length;
        //获取submit按钮的个数
        var sLength=$("#form1 :submit").length;
        //获取隐藏的个数 display:none也算一个
        var hLength=$("#form1 :hidden").length;;
        $("div").append("文本框有"+textLength+"个<br/>")
        .append("密码框有"+pLength+"个<br/>")
        .append("单选按钮有"+rLength+"个<br/>").
        append("复选框有"+cLength+"个<br/>").
        append("文本域有"+fLength+"个<br/>").
        append("submit有"+sLength+"个<br/>").
        append("hidden有"+hLength+"个<br/>").css("color","red");
    });
  </script>
 </head>

 <body>

  <form id="form1">
    文本框<input type="text"/><br/>
    文本框<input type="text"/><br/>
    密码框<input type="password"/><br/>
    密码框<input type="password"/><br/>
    单选按钮<input type="radio" name="s"/>
    <input type="radio" name="s"/>
    <br/>
    复选框<input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <br/>
    文本域<input type="file"/>
    <br/>
    <input type="submit" value="提交"/>
    <input type="submit" value="提交"/>
    <br/>
    <input type="hidden" value="1234"/>
    <span style="display:none">我是span标签</span>
  </form>

  <div></div>
 </body>
</html>