JQuery 操作表单对象

最新推荐文章于 2024-09-25 15:18:17 发布

原创最新推荐文章于 2024-09-25 15:18:17 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jQuery #Form #表单

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

本文详细介绍了如何使用JQuery库来操作各种表单元素，包括文本域（TextField）、文本区域（TextArea）、单选按钮（Radio）、复选框（Checkbox）以及下拉列表（Select）。通过示例代码展示了读取和设置这些元素值的方法，以及如何检查单选按钮和复选框的选中状态。

1.JQuery操作文本域TextField对象

1.1JQuery读文本域textfield中的值

userName:<input type="text" name="userName" id="userName" value="请输入姓名"/>

alert($("#userName").attr("value"));//"请输入姓名"

1.2JQuery写文本域textfield中的值

$("#userName").attr("value","sunfei");

$("#userName").attr("value","");//清空文本框

2.JQuery操作文本域TextArea对象

<textarea rows="10" cols="30" id="introduce">介绍一些你自己吧!</textarea>

2.1JQuery读文本域textarea中的值

alert($("#introduce").attr("value"));//"介绍一些你自己吧!"

2.2JQuery写文本域textarea中的值

$("#introduce").attr("value","introduce yourself!");

$("#introduce").attr("value","");//清空文本域

3.JQuery操作单选按钮对象

3.1jquery取radio单选按钮的值

<input type="radio" name="sex" value="1"/> male<br/>
<input type="radio" name="sex" value="2" checked="checked" /> female</br>
<input type="radio" name="sex" value="3"/> other

alert($("input[name='sex']:checked").val()); //2

alert($("input[name='sex'][checked]").val()); //2

alert($('input[name=sex][checked]').val()); //2

alert($(":radio:checked").val()); //2

3.2radio单选组的第三个元素为当前选中项
$('input[name=sex]').get(2).checked = true;

3.3判断radio是否选中并取得选中的值:

function checkradio(){
var item = $(":radio:checked");
var len=item.length;
if(len>0){
alert("你选中的值为:"+$(":radio:checked").val());

}

4.JQuery操作复选框对象

<input type="checkbox" name="music"/>喜欢听音乐<br/>

4.1jquery取checkbox复选框的值

alert($("#bkball").attr("value")); //basketball

$("#bkball").attr("checked","");//不打勾

$("#bkball").attr("checked",false);//不打勾

$("#bkball").attr("checked",true);//打勾

if($("#bkball").attr('checked')==undefined){
$("#bkball").attr("checked",true);//没选则选择
}else{

$("#bkball").attr("checked",false);//选择则不选
}

5.JQuery操作下拉列表对象

5.1获取select被选中项的文本
var item = $("select[name=items] option[selected]").text();
5.2select下拉框的第二个元素为当前选中值

$('#select_id')[0].selectedIndex = 1;

5.3jquery获取下拉列表选中的option的值

alert($('#province').val());//默认输出:"hubei"

$("#province").attr("value","shandong");//设置value="shandong"的项目为当前选中项

$("#province").empty();//清空下拉框