search

Home >Web Front-end >JS Tutorial >jQuery gets the corresponding Input example

jQuery gets the corresponding Input example

巴扎黑
巴扎黑Original
2016-12-06 13:22:17994browse

页面上有许多input框，使用的是EasyUI样式，中间还参杂着各种其他无id的Input框，如下：
<input class="easyui-textbox"/>
<input id="holdercscname" class="easyui-textbox" validType="length[0,100]"/>
<input id="holdercscno" class="easyui-textbox" validType="length[0,100]"/>
<input id="managecom" class="easyui-combobox" data-options="editable:false"/>
<input class="easyui-textbox"/>
<input class="easyui-textbox"/>
<input id="starttime" class="easyui-datebox" data-options="editable:false/>
<input class="easyui-textbox"/>
如何获取只获取id属性赋值了的input框呢？
var inputElemts = $(&#39;:input[id]&#39;);    //获取表单所有的input框，并且拥有属性id的
inputElemts.each(function(i,inputElement){
    exportUrl += &#39;&&#39; + $(this).attr(&#39;id&#39;) + &#39;=&#39; + $(this).textbox(&#39;getValue&#39;);
});
补充：
$(&#39;:input&#39;)                获取所有input框
$(&#39;:input[id]&#39;)            获取所有input框，拥有id属性
$(&#39;:input[id^="aaa"]&#39;)    获取所有input框，id为aaa开头   
$(&#39;:input[id$="aaa"]&#39;)    获取所有input框，id为aaa结尾
$(&#39;:input[id*="aaa"]&#39;)    获取所有input框，id包含aaa
$(&#39;:input[id^="aaa"][id$="aaa"]&#39;)    获取所有input框，id为aaa开头，并且id为aaa结尾   
jquery中:input和input的区别
:input表示选择表单中的input,select,textarea,button元素，input仅仅选择input元素。
示例测试：
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
 var len1=$("#form1 input").length;
 var len2=$("#form1 :input").length;
 alert("len1的长度是："+len1+",len2的长度是:"+len2);
});
</script>
</head>
<body>
<form id="form1" action="#" method="post">
  <label for="userName">用户名：</label>
  <input type="text" id="userName"/>
  <label for="pwd">密码：</label>
  <input type="password" id="pwd"/>
  <select><option>wo kao</option><option>ni  kao</option><option>quancun kao</option></select>
  <textarea cols="15" rows="20"></textarea>
</form>
</body>
执行结果：len1结果为2，len2结果为4.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of Mock file system in Node.js testingNext article：Detailed explanation of Mock file system in Node.js testing

Related articles

See more