Question

如何用jquery获取当前页面中input的个数?

<input type="text" name="name" value="John"/>
<input type="text" name="password" value="jack"/>
<input type="text" name="url" value="tom"/>
-------------------------------------------------------------------------
代码如上，如何获取当前页面中input的个数?初学。数量为3，问题是如何获取到这个数量?

Answer 1

jQuery的length 属性可以获取包含 jQuery 对象中元素的数目，所以获取input的个数可用如下代码实现

$('input').length;       // 所有input的数量，包括文本框、单选按钮、复选框、隐藏域等
$('input:text').length;  // 文本框的数量

示例代码如下

1. 创建Html元素

   <div class="box">
   	<span>点击按钮获取文本框数量：</span><br>
   	<div class="content">
   		<input type="text" name="name" value="John"/>
   		<input type="text" name="password" value="jack"/>
   		<input type="text" name="url" value="tom"/>
   	</div>
   	<input type="button" value="点击获取文本框数量">
   </div>

2. 设置css样式

   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
   div.box span{color:#999;font-style:italic;}
   div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
   input[type='button']{height:30px;margin:10px;padding:5px 10px;}
   input[type='text']{width:200px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}

3. 编写jquery代码

   $(function(){
   	$(":button").click(function() {
   		alert($("input:text").length);
   	})
   })

4. 观察效果

   

Answer 2

$("input").length

Answer 3

$("input[type='text']").size()