JS and Jquery 操作Form表单
来源：互联网 发布：大众网络报电子版 编辑：程序博客网 时间：2024/06/06 09:55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form表单基本操作</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> </head> <body> <form action="#" method="post"> <div style="margin: 10px;"> 姓名：<input type="text" name="name" id="name" placeholder="名称"/> </div> <div style="margin: 10px;"> 年龄：<input type="text" name="age" id="age" placeholder="年龄"/> </div> <div style="margin: 10px;"> <button type="button" id="buttonInitial">给input赋初始值</button> <button type="button" id="buttonEmpty">清空input</button> <button type="button" id="buttonNoAvailable">设置input不可用</button> <button type="button" id="buttonaVailable">设置input可用</button> <button type="button" id="buttonHide">设置input隐藏</button> <button type="button" id="buttonShow">设置input显示</button> </div> <div style="margin: 10px;"> 性别：<input type="radio" name="sex" id="gril" value="0"/> <input type="radio" name="sex" id="boy" value="1"/> </div> <div style="margin: 10px;"> <button type="button" id="radioInitial">设置radio的初始值</button> <button type="button" id="radioGet">获取radio的选中值</button> <button type="button" id="radioList">遍历radio中所有值</button> <button type="button" id="radioValue">获取radio中某一个值</button> </div> <div style="margin: 10px;"> <label>水果:</label> <label><input name="Fruit" type="checkbox" value="苹果" />苹果 </label> <label><input name="Fruit" type="checkbox" value="桃子" />桃子 </label> <label><input name="Fruit" type="checkbox" value="香蕉" />香蕉 </label> <label><input name="Fruit" type="checkbox" value="梨" />梨 </label> </div> <div style="margin: 10px;"> <button type="button" id="checkboxInitial">设置checkbox的初始值</button> <button type="button" id="checkboxAll">设置checkbox的全选</button> <button type="button" id="checkboxNoAll">设置checkbox的全不选</button> <button type="button" id="checkboxGet">获取checkbox的选中值</button> <button type="button" id="checkboxList">遍历checkbox中所有值</button> <button type="button" id="checkboxValue">获取checkbox中某一个值</button> <button type="button" id="checkboxEven">设置checkbox选中所有奇数</button> <button style="margin-top: 10px;" type="button" id="checkboxOver">设置checkbox反选</button> </div> <div style="margin: 10px;"> <select id="selectId" name="selectName" style="width: 80px;"> <option value ="0">请选择</option> <option value ="1">第一层</option> <option value ="2">第二层</option> <option value="3">第三层</option> <option value="4">第四层</option> </select> </div> <div style="margin: 10px;"> <button type="button" id="selectInitial">设置select的默认值</button> <button type="button" id="selectGet">获取select的选中值</button> <button type="button" id="selectList">遍历select所有值</button> <button type="button" id="selectValue">获取select中某一个值</button> </div> </form> <script type="text/javascript"> $(function () { }); //给input赋初始值 $("#buttonInitial").on("click", function () { $("#name").val("张三"); $("#age").val("40"); }); //清空input $("#buttonEmpty").on("click", function () { $("#name").val(""); $("#age").val(""); }); //设置input不可用 $("#buttonNoAvailable").on("click", function () { $("#name").attr("disabled","true"); $("#age").attr("disabled","true"); }); //设置input可用 $("#buttonaVailable").on("click", function () { $('#name').removeAttr("disabled"); $('#age').removeAttr("disabled"); }); //设置input隐藏 $("#buttonHide").on("click", function () { $("#name").hide(); $("#age").hide(); }); //设置input显示 $("#buttonShow").on("click", function () { $('#name').show(); $('#age').show(); }); //设置radio的初始值 $("#radioInitial").on("click", function () { $("input[type='radio'][name=sex][value='0']").attr("checked",true); }); //获取radio的选中值 $("#radioGet").on("click", function () { var v1=$('input[name="sex"]:checked').val(); var v2=$('input:radio:checked').val(); var v3=$('input[name="sex"]').filter(':checked').val(); alert("v1:"+v1+" v2:"+v2+" v3:"+v3); }); //遍历radio中所有值 $("#radioList").on("click", function () { $('input[name="sex"]').each(function(){ alert(this.value); }); }); //获取radio中某一个值 $("#radioValue").on("click", function () { var v1=$('input[name="sex"]:eq(0)').val(); var v2=$('input[name="sex"]:eq(1)').val(); alert("v1:"+v1+" v2:"+v2); }); //设置checkbox的初始值 $("#checkboxInitial").on("click", function () { var v1=$('input[name="sex"]:eq(0)').val(); var v2=$('input[name="sex"]:eq(1)').val(); alert("v1:"+v1+" v2:"+v2); }); //设置checkbox的全选 $("#checkboxAll").on("click", function () { $("[name='Fruit']").attr("checked",'true');//全选 }); //设置checkbox的全不选 $("#checkboxNoAll").on("click", function () { $("[name='Fruit']").removeAttr("checked");//取消全选 }); //获取checkbox的选中值 $("#checkboxGet").on("click", function () { $("[name='Fruit']").each(function(){//反选 if($(this).attr("checked")){ alert($(this).val()); } }) }); //遍历checkbox中所有值 $("#checkboxList").on("click", function () { $("[name='Fruit']").each(function(){ alert($(this).val()); }) }); //获取checkbox中某一个值 $("#checkboxValue").on("click", function () { var i=1; $("[name='Fruit']").each(function(){//反选 if(i==2){ alert("two is value:"+$(this).val()); } i++; }) }); //设置checkbox选中所有奇数 $("#checkboxEven").on("click", function () { $("[name='Fruit']:even").attr("checked",'true');//选中所有奇数 }); //设置checkbox反选 $("#checkboxOver").on("click", function () { $("[name='Fruit']").each(function(){//反选 if($(this).attr("checked")){ $(this).removeAttr("checked"); } else{ $(this).attr("checked",'true'); } }) }); //设置select的默认值 $("#selectInitial").on("click", function () { $("#selectId option[value='1']").attr("selected", "selected"); }); //获取select的选中值 $("#selectGet").on("click", function () { var checkText=$("#selectId").find("option:selected").text(); //获取Select选择的text var checkValue=$("#selectId").val(); //获取Select选择的Value var checkIndex=$("#selectId ").get(0).selectedIndex; //获取Select选择的索引值 alert("选中value值为："+checkValue); alert("选中text值为："+checkText); alert("选中value值的索引为："+checkIndex); }); //遍历select所有值 $("#selectList").on("click", function () { $("select[name=selectName] option").each(function() { alert($(this).val()); }); }); //获取select中某一个值 $("#selectValue").on("click", function () { var value=$("#selectId option:eq(1)").val(); alert("某个值："+value); }); </script> </body> </html> 0 0
- JS and Jquery 操作Form表单
- jQuery操作form表单
- jQuery Form表单插件jquery.form.js
- Jquery操作select、form表单
- jQuery操作Form表单元素
- jQuery操作Form表单元素
- Form表单插件jquery.form.js
- form表单提交 jquery.form.js
- js form表单相关操作
- js form表单数据操作
- jquery表单验证插件 jquery.form.js
- jquery表单验证插件 jquery.form.js
- jquery表单插件 jquery.form.js
- jquery表单插件 jquery.form.js
- jquery表单验证插件 jquery.form.js
- jquery表单插件 jquery.form.js
- jquery表单验证插件 jquery.form.js
- Jquery的表单插件 jquery.form.js
- LeetCode 4---Median of Two Sorted Arrays
- Python3 基础：返回函数和匿名函数
- Java基本数据类型
- curl如何发起DELETE/PUT请求
- 欢迎使用CSDN-markdown编辑器
- JS and Jquery 操作Form表单
- Linux下解决脚本错误
- cattle学航模之发动机篇
- C语言的Socket编程例子（TCP和UDP）
- Unity 加载网络图片
- Dubbo的协议比较
- Task7 总结
- 课程设计—班级个人信息管理系统
- JS 来回切换图片
