搜 索

jquery实现获取一些常见的web网页表单元素value属性值

编辑:QTOOL.NET日期:2020-12-17133

在制作网页时,我们经常会使用js代码获取操作页面提交参数,这里简单介绍了制作网页表单过程中常见的获取几种表单控件值的方法.

一、取得文本框的value值

例子:

<input type="text" id="a1" name="text1" value="qtool" size="100" />


1、$("#a1").val();

通过指定id为a1的元素获取val属性值

2、$( "input[name='text1']").val();

查询选择name属性等于'text1'的input元素值


二、获取文本域中的内容

示例:

<textarea id="a2" name="text2" maxlength="500"></textarea>


1、$("#a2").val();

id为a2元素的值

2、$("textarea[name='text2']").val();

文本域name属性为text2的元素值


三、select下拉列表选中的值

示例

<select name="text3" class="a3" >

<option value="1">字符编码</option>

<option value="2">qtool</option>

<option value="3">在线切图</option>

</select>


1、$("#a3").val();

id为a3下拉列表元素的值

2、$("select[name='text3']").val();

文本域name属性为text3的select下拉列表选中值


四、单选框与复选框的值

1、单选框

<input type="radio" name="a4" value="单选框1" checked>  单选框1

<input type="radio" name="a4" value="单选框2">  单选框2


("input[name='a4']:checked").val();

查询选中单选框的值


2、复选框:

<input type="checkbox" name="a5" value="复选框1" />内容1  

<input type="checkbox" name="a5" value="复选框2" />内容2 

<input type="checkbox" name="a5" value="复选框3" />内容3


  var fuxuankuangarr =[];//定义一个数组      

 $('input[name="a5"]:checked').each(function(){

 fuxuankuangarr.push($(this).val());   

  });

遍历每一个属性name为a5的复选框,选中状态的则执行函数,然后将选中复选框的值依次加入的数组fuxuankuangarr之中


五、button按钮的值

<input type="button" id="b1" name="textb1" value="图片叠加" />

1、("#b1").val();

2、("input[name='textb1']").val();

id为b1的button按钮value属性值为图片叠加

六、color颜色控件

<input type="color" name="colorsc" id="colorsc" value="#c1c1c1" />

1、("#colorsc").val();

2、("input[name='colorsc']").val();

......同理其他一些标签内容获取方法同上.

以上就是一些网页制作过程中获取常用一些表单控件值的方式,在实际使用时需要先加载jquery插件。

TAG标签:js
此文章由QTOOL.NET编辑
最新文章

热门标签