JQuery：各种操作表单元素方法小结

绝地灬酷狼 2022-08-06 17:24 157阅读 0赞

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:757px; color:rgb(68,68,68); font-family:微软雅黑,Tahoma,Helvetica,SimSun,sans-serif; font-size:12px; line-height:18px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="word-wrap:break-word; font-size:14px"> 表单元素无处不在，已然成了Web<a href="http://www.html5cn.org/portal.php?mod=list&amp;catid=20" style="word-wrap:break-word; color:rgb(51,102,153); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">应用</a>不可或缺的一个部分。对表单最最最常见的操作就是获取表单元素的值或者更改表单元素的值。那在JQuery和JavaScript中怎么操作表单元素的值？ JQuery操作表单总结： 1、文本框、密码框、隐藏域、文本域（id换成对应的,value属性存在，才能利用attr(‘value’) 获取值，否则返回undefined）： 1.1 获取—&gt;$(“#text”).val()或者$(“#text”).attr(‘value’) 1.2 设置—&gt;$(“#text”).val(‘test’)或者$(“#text”).attr(‘value’,’test’) 2、按钮：普通按钮、重置按钮和提交按钮（id换成对应的,value属性存在，才能利用attr(‘value’) 或者val()获取值，否则attr返回undefined,val返回空） 2.1 获取—&gt;$(“#btn”).val()或者$(“#btn”).attr(‘value’) 2.2 设置—&gt;$(“#btn”).val(‘test’)或者$(“#btn”).attr(‘value’,’test’) 3、复选框、单选框：（id换成对应的,value属性存在，才能利用attr(‘value’) 或者val()获取值，否则attr返回undefined,val返回on（不管是否存在checked属性）） 3.1 获取—&gt;$(“#check”).val()或者$(“#check”).attr(‘value’) 3.1 设置—&gt;$(“#check”).val(‘test’)或者$(“#check”).attr(‘value’,’test’) 3.3 获取选中的复选框的值：$(“input[type=checkbox][checked]“).attr(‘value’)或者$(“input[type=checkbox][checked]“).val()【ps:只会返回第一个被选中的值】 
 <div style="word-wrap:break-word; overflow:hidden; margin:10px 0px; padding:10px 0px 5px 10px; color:rgb(102,102,102); zoom:1; border:1px solid rgb(204,204,204)"> 
 <div style="word-wrap:break-word"> 
 <ol style="word-wrap:break-word; margin:0px 0px 0px 10px!important; padding:0px!important"> 
 <li style="word-wrap:break-word; margin:0px 0px 0px 2em; padding:0px 0px 0px 10px; list-style-type:decimal-leading-zero; font-family:Monaco,Consolas,'&quot;Lucida Console&quot;','&quot;Courier New&quot;',serif; font-size:12px; line-height:1.8em"> //获取全部选中的复选框的值$(“input[type=checkbox][checked]“).each(function(){alert($(this).val());}) </li> 
 <li style="word-wrap:break-word; margin:0px 0px 0px 2em; padding:0px 0px 0px 10px; list-style-type:decimal-leading-zero; font-family:Monaco,Consolas,'&quot;Lucida Console&quot;','&quot;Courier New&quot;',serif; font-size:12px; line-height:1.8em"> //若要将全选中的值传递给后台，则将复选框的name属性命名为namevalue[]形式</li> 
 </ol> 
 </div> 
 复制代码 
 </div> 3.4 全选、取消全选和反选（单选框不能全选，可以反选） 
 <div style="word-wrap:break-word; overflow:hidden; margin:10px 0px; padding:10px 0px 5px 10px; color:rgb(102,102,102); zoom:1; border:1px solid rgb(204,204,204)"> 
 <div style="word-wrap:break-word"> 
 <ol style="word-wrap:break-word; margin:0px 0px 0px 10px!important; padding:0px!important"> 
 <li style="word-wrap:break-word; margin:0px 0px 0px 2em; padding:0px 0px 0px 10px; list-style-type:decimal-leading-zero; font-family:Monaco,Consolas,'&quot;Lucida Console&quot;','&quot;Courier New&quot;',serif; font-size:12px; line-height:1.8em"> //全选，checked的值可以是true或者checked,后者是w3c给出的值$(“[name='test1']“).attr(“checked”,‘checked’);//取消全选$(“[name='test1']“).removeAttr(“checked”)//反选$(“[name='test1']“).each(function(){if($(this).attr(“checked”)){$(this).removeAttr(“checked”);}else{$(this).attr(“checked”,’true’);}});</li> 
 </ol> 
 </div> 
 复制代码 
 </div> 3.5 判断选中状态：$(“#test1″).attr(“checked”) ：未选中返回undefined,选中返回checked。所以，$(“#test1″).attr(“checked”) == true不能作为是否选中的判断，$(“#test1″).attr(“checked”) == undefined可以作为未选中的判断。 3.6 取消选择—&gt;$(“#test1″).attr(“checked”,false)或者$(“#test1″).removeAttr(“checked”)（ps<img src="http://bbs.html5cn.org/static/image/smiley/default/shy.gif" alt="" style="word-wrap:break-word">(“#test1″).attr(“checked”,””)在FireFox中有效，在Google中无效) 3.7 选中某个复选框(单选框)–&gt;$(“#test2″).attr(“checked”,true)或者$(“#test2″).attr(“checked”,”checked”) 4、下拉框： 4.1 获取选中选项的值—&gt;$(“#slt”).val()（ps<img src="http://bbs.html5cn.org/static/image/smiley/default/shy.gif" alt="" style="word-wrap:break-word">(“#slt”).attr(‘value’)会返回undefined） 4.2 设置—&gt;$(“#slt”).val(‘audi’)（ps:如果select中有值为audi的选项,该选项就会被选中,如果不存在,则select不做任何变动） 4.3 获取选中选项的文本—&gt;$(“#slt option:selected”).text()或者$(“#slt”).find(“option:selected”).text() 4.4 设置选中选项的文本—&gt;$(“#slt”).find(“option:selected”).text(‘test’)或者$(“#slt option:selected”).text(‘test’); 4.5 获取选中项的索引—&gt;$(“#slt”).get(0).selectedIndex 4.6 设置索引—&gt;$(“#slt”).get(0).selectedIndex = index(ps:索引从0开始,index的最大值不能超过option的最大索引，否则$(“#slt”).get(0).selectedIndex 返回-1) 4.7 清空select—&gt;$(“#slt”).html(”) 或者$(“#slt”).empty() 4.8 添加option—&gt;$(‘&lt;option value=”1″&gt;1&lt;/option&gt;’).appendTo($(“#slt”))&nbsp;&nbsp;或者&nbsp;&nbsp;$(“#slt”).append(‘&lt;option value=”3″&gt;2&lt;/option&gt;’); 4.9 删除option—&gt;$(“#slt option[value='opel']“).remove()：删除值是opel的option（value属性要存在，同样可以根据存在的text/index属性删除option） 5、元素的可用性(disabled的官方值是disabled) 5.1 禁用元素—&gt;$(“#text”).attr(“disabled”,true)或者$(“#text”).attr(“disabled”,”disabled”); 5.2 启用元素—&gt;$(“#text”).attr(“disabled”,false) 或者$(“#text”).removeAttr(“disabled”); 5.3 是否可用—&gt;$(“#text”).attr(“disabled”) 返回disabled则不可用，返回undefined则可用（ps:可以根据$(“#text”).attr(“disabled”) ==undefined的返回值判断）</td> 
 </tr> 
 </tbody> 
</table>