jQuery表单控件操作

自己下载jQuery类库(http://docs.jquery.com/Downloading_jQuery)，当前使用版本1.5。

源码：

<!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=gb2312" />
<title>jQueryForm</title>
<style type="text/css">
body,td{font-size:12px;}
dl{margin:0px; padding:0px;}
dl dt{margin:4px; border:solid 1px #39C; font-weight:bold; line-height:22px;}
dl dd{margin:4px; border:solid 1px #39C; line-height:22px;}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.5.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        //表单提交控制
        $("#submit1").click(function(){
            if(confirm("Is Submit?")){
                $("form1")[0].submit();
            }else{
                return false;
            }
        });
        //获取Text文件框
        $("#button1").click(function(){
            $("<dd/>").html("<b>姓名：</b>"+$("#xingming").val()).appendTo($("#msgul"));
            $("<dd/>").html("<b>职务：</b>"+$("#zhiwu").val()).appendTo($("#msgul"));
            });
        //获取爱好选中项文本和值
        $("#getaihaotext").click(function(){
            $("<dd/>").html("<b>爱好Text：</b>"+$("#aihao option:selected").text()).appendTo("#msgul");
            $("<dd/>").html("<b>爱好Value：</b>"+$("#aihao").val()).appendTo("#msgul");
            });
        //设置Select菜单的选中项
        $("#button2").click(function(){
            $("#aihao").val("kandianshi");
            });
        //清空下拉菜单
        $("#button3").click(function(){
            $("#aihao").empty();
            //$("#aihao").html("");
            });
        //添加下拉菜单选项
        $("#button4").click(function(){
                if(!ExistRe($("#aihao"),$("#addselectValue").val())){
                    $("<option>"+$("#addselectText").val()+"</option>").attr("value",$("#addselectValue").val()).appendTo($("#aihao"));
                    $("#aihao").val($("#addselectValue").val());
                }else{alert($("#addselectValue").val()+"，已存在！");}
            });
        //锁定单选项按钮
        $("#button5").click(function(){
            var redioJQUERYobj=$("input[id='xinqing']");
            /* alert($("input[id='xinqing'][checked]").val());
                通过checked属性锁定单选项，在FF和IE上测试失败。
                $("#xinqing")
                通过相同的ID获取元素的集合对象，在FF和IE上测试失败。
            */
            for(var i=0;i<redioJQUERYobj.length;i++){
            if(redioJQUERYobj[i].checked){
                $("<dd/>").html("<b>单选项：</b>"+redioJQUERYobj[i].value).appendTo($("#msgul"));
            }
            /*jQuery对象的实现方式
            if($(redioJQUERYobj[i]).attr("checked")){
                $("<dd/>").html("<b>单选项：</b>"+$(redioJQUERYobj[i]).val()).appendTo($("#msgul"));
            }
            */
            }
          });
        //复选项操作
        $("#button6").click(function(){
            var checkboxList=$("input[name='aidianying']");
            for(var i=0;i<checkboxList.length;i++){
                if(checkboxList[i].checked){
                    $("<dd/>").html("<b>我喜欢的电影：</b>"+checkboxList[i].value).appendTo($("#msgul"));
                }
            }
        });
        //取消所有选择项
        $("#button7").click(function(){
            var checkboxList=$("input[name='aidianying']");
            for(var i=0;i<checkboxList.length;i++){
                $(checkboxList[i]).attr("checked",false);
            }
        });
        //禁用与启用控件
        $("#button8").click(function(){
            if($("#button5").attr("disabled")){
                $("#button5").attr("disabled",false);
                $("#button6").attr("disabled",false);
                $("#button7").attr("disabled",false);
                $("#button8").attr("value","启用上面三个按钮");
            }else{
                $("#button5").attr("disabled",true);
                $("#button6").attr("disabled",true);
                $("#button7").attr("disabled",true);
                $("#button8").attr("value","禁用上面三个按钮");
            }
        });
    });
function ExistRe(selectObj,selValue){
    //alert(selectObj[0].options.length);
    //alert(selectObj[0].options[0].text);
    //alert(selectObj[0].options[0].value);
    var re_value=false;
    for(var i=0;i<selectObj[0].options.length;i++){
        if(selectObj[0].options[i].value==selValue){re_value=true;}
    }
    return re_value;
}
</script>
</head>
<body>
<div>
<table border="1">
<form id="form1" method="post" action="#">
<tr><td>姓名：</td><td><input type="text" name="xingming" id="xingming"/></td></tr>
<tr><td>职务：</td><td><input type="text" name="zhiwu" id="zhiwu"/></td></tr>
<tr><td>爱好：</td><td><select id="aihao" name="aihao">
<option value="dushu">读书</option>
<option value="kandianshi">看电视</option>
</select></td></tr>
<tr>
<td>心情：</td>
<td><input name="xinqing" id="xinqing" type="radio" value="gaoxing"/>高兴 <input name="xinqing" id="xinqing" type="radio" value="yumen" />郁闷 <input name="xinqing" id="xinqing" type="radio" value="yiban" />一般 </td></tr>
<tr>
<td>喜欢的电影</td>
<td><input name="aidianying" type="checkbox" value="猛龙过江"/>猛龙过江<input name="aidianying" type="checkbox" value="最强喜事"/>最强喜事<input name="aidianying" type="checkbox" value="功夫熊猫"/>功夫熊猫<input name="aidianying" type="checkbox" value="上海滩"/>上海滩</td>
</tr>
<tr><td colspan="2">
<input type="submit" id="submit1" name="submit1" value="Submit提交表单"/>
<input type="button" id="button1" name="button1" value="获取文本内容"/>
</td></tr>
<tr><td colspan="2">
<div style="border:solid 1px #F00">
<input type="button" id="getaihaotext" name="getaihaotext" value="获取爱好选中项内容"/>
<input type="button" id="button2" name="button2" value="我喜欢看电视"/>
<input type="button" id="button3" name="button3" value="清空下拉菜单"/>
</div>
<div style="border:solid 1px #F00">
<input type="text" id="addselectText" name="addselectText" value="Text"/>
<input type="text" id="addselectValue" name="addselectValue" value="value"/>
<input type="button" id="button4" name="button4" value="添加"/>
</div>
</td></tr>
<tr><td colspan="2">
<input type="button" id="button5" name="button5" value="我的心情"/>
<input type="button" id="button6" value="我喜欢的电影"/>
<input type="button" id="button7" value="取消所有选择电影"/>
</td></tr>
<tr><td>
<input type="button" id="button8" value="禁用上面三个按钮"/>
</td></tr>
</form>
</table>
</div>
<div>
<div style="width:200px; background-color:#F6F6F6; border:solid 1px #999">
<dl id="msgul">
<dt>结果输出窗口</dt>
</dl>
</div>
</div>

</body>
</html>

制作人：飞虎无兄弟不编程！

====================================================

欢迎加QQ群进行更多交流：305397511 专注于php、mysql以及开源框架

转载于:https://www.cnblogs.com/jishume/articles/2040132.html

jQuery表单控件操作相关推荐

autojs遍历当前页面所有控件_HTML5表单和表单控件的使用
哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第一阶段 HT ...
Angular19 自定义表单控件
1 需求当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...
bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block;width: 100%;height: 34px;padding: 6px 12px;font-size: 14px;li ...
Bootstrap表单控件的尺寸
控件的尺寸在Bootstrap中,可以通过类似.input-lg的类为控件设置高度,类似.col-*的类为控件设置宽度. 1.高度尺寸一般情况下,控件的默认高度就能满足要求.当然,你也可以为控件添 ...
Bootstrap3 表单控件的状态
控件的状态在表单的使用过程中,每个控件可能都会有很多状态,通过表单控件的状态,可以给用户或访问者提供一些有用的反馈. Bootstrap为表单控件提供了 4 种状态,分别是获得焦点状态.禁用状态.只 ...
Bootstrap 表单控件的状态
在使用过程中,每个控件可能都会有很多状态,通过表单控件的状态,可以给用户或访问者提供一些有用的反馈. Bootstrap提供了 4 种状态,分别是获得焦点状态.无效输入状态.禁用状态.验证状态,并为每 ...
Bootstrap 表单控件的尺寸
在Bootstrap中,有三种设置控件尺寸的方法,一种是让控件成为块级元素,一种是使用相对尺寸,一种是使用网格尺寸. 1.让控件成为块级元素如果想让控件像块级元素一样占满容器,就可以为它添加 .in ...
使用基于列表的表单控件
使用基于列表的表单控件我们可以在我们的Adobe Flex程序中使用基于表单控件,例如ComboBox,List,HorizontalList.在我们插入这种控件以后,我们必须为其提供要显示的项目 ...
react学习笔记(9)表单控件
1.表单控件的操作 1.数据双向绑定 demo1: 在输入框中输入或者删除数据时,可以实时监控. class App extends React.Component {state = {val : & ...

jQuery表单控件操作

jQuery表单控件操作相关推荐

最新文章

热门文章