使用jQuery操作表单和表格
2020-02-03 02:00
801 查看
使用jQuery操作表单元素
1.1、操作文本框
1、获取文本框的值(两种方法):
var textCon = $("#id").val(); var textCon = $("#id").attr("value");
2、设置文本框的值,可以使用attr()方法:
$("#id").attr("value","要设定的值");
3、设置文本框不可编辑的方法:
$("#id").attr("disabled","disabled");
4、设置文本框可编辑的方法:
$("#id").removeAttr("disabled");
例如:获取文本框的值以及切换编辑状态
<input type="text" id="testInput"/> <input type="submit" value="提交" name="tj" id="tj"/> <input type="button" value="修改" name="xg" id="xg"/>
<script type="text/javascript"> $(document).ready(function(){ $("#tj").click(function(){ if($("#testInput").val() != ""){ alert($("#testInput").val()); //弹出文本框的值 $("#testInput").attr("disabled","disabled");//将文本框变为不可编辑状态 }else{ alert("请输入文本内容!") $("testInput").focus(); //将焦点设置到文本框处 return false; } }); $("#xg").click(function(){ if($("#testInput").attr("disabled") == "disabled"){ $("#testInput").removeAttr("disabled"); //移除文本框的disabled属性 } }); }) </script>
操作文本域
文本域的属性设置、值的获取以及编辑状态的修改与文本框都相同。所以在此不做过多赘述。
操作单选按钮和复选框
1、使用attr()方法可以设置选中的单选框和复选框:
$("#id").attr("checked",true);
2、取消选中单选按钮和复选框:
$("#id").removeAttr("checked");
3、判断选择状态
if($("#id").attr("checked")=='checked'){ }
例如:使用按钮控制单选框的选中状态
<form> <h3 align="center">选择你喜欢的运动</h3> <input type="checkbox" name="hobby" value="游泳" />游泳 <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="滑冰" />滑冰 <input type="checkbox" name="hobby" value="滑雪" />滑雪 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 <input type="checkbox" name="hobby" value="乒乓球" />乒乓球<br /><br /> <input type="button" id="checkAll" value="全选"/> <input type="button" id="unCheckAll" value="全不选" /> <input type="button" id="revBtn" value="反选" /> <input type="button" id="subBtn" value="提交" /> </form>
<script type="text/javascript"> $(document).ready(function(){ $("#checkAll").click(function(){ $("input[type=checkbox]").attr("checked",true); }) $("#unCheckAll").click(function(){ $("input[type=checkbox]").removeAttr("checked"); }) $("#revBtn").click(function(){ $("input[type=checkbox]").each(function(){ this.checked = !this.checked; }); }) $("#subBtn").click(function(){ var msg = "你最喜欢的运动是:\r\n"; $("input[type=checkbox]:checked").each(function(){ msg+=$(this).val()+"\r\n"; }); alert(msg); }) }) </script>
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 《锋利的jQuery》读书笔记 第5章 jQuery对表单、表格的操作及更多应用
- JQuery对表单元素的基本操作使用总结
- jQuery中操作表单与表格
- 锋利的jQuery读书笔记-第5章 jQuery对表单、表格的操作及更多应用
- JQuery对表单元素的基本操作使用总结
- jQuery对表单表格的操作
- jQuery使用(三):DOM操作之val()方法操作表单元素value值
- jQuery操作表格背景色迭代和鼠标移动事件(CSS中使用expression)
- jQuery表单 表格操作及应用
- jQuery对表单、表格的操作及更多应用
- 【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用
- 《锋利的jQuery》要点归纳(四)jQuery对表单、表格的操作及更多应用(下:其他应用)
- JQuery对表单元素的基本操作使用总结
- 【锋利的JQuery】0x05 JQuery对表单 表格的操作及作用
- jQuery 05 表单操作/表格操作
- 第五章jQuery对表单表格的操作及更多应用
- 使用jQuery操作HTML的table表格的实例解析
- jQuery对表单表格的操作
- 使用jQuery对表格的操作,组织JSON字符串
- 04_jQuery对表单表格的操作及应用