jQuery学习笔记2——表单操作

一、获取和设置表单的值：val()和text()

1. 获取表单的值： $("#username").val();

2. 设置表单的值：

$("#username").val("我来了");
$("input[name='password']").val()
//checkbox得到的是一个数组，需要进行遍历
$("input[name='interest']:checked").each(function(n){
     alert($(this).val());
 });

//checkbox只能传入数组
$("input[name='interest']").val(["足球","篮球","羽毛球"]);

$("#address").val(); //获取select的值,即编号或下标
$("#address").text()    //获取select中的所有文本

html部分

<form id="myform">
        用户名：<input type="text" name="username"  id="username"/><br/>
        密    码:<input type="password" name="password" id="password"/><br/>
        用户兴趣:<input type="checkbox" name="interest" value="足球"/>足球
        <input type="checkbox" name="interest" value="篮球"/>蓝球
        <input type="checkbox" name="interest" value="羽毛球"/>羽毛球
        <input type="checkbox" name="interest" value="游泳"/>游泳<br/>
        用户性别:<input type="radio" name="sex" value="0">男
                <input type="radio" name="sex" value="1">女<br/>
        用户户籍:<select name="address" id="address">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">昭通</option>
                <option value="4">彝良</option>
        </select>    <br/>
        <input type="button" value="测试数据" id="btn"/>
</form>

二、常用代码

1.重置表单 

$("form").each(function(){
   .reset();
});

2. 清空内容

$("#text_id").attr("value",'');

3.单选框

<span>性别：</span>
<input id="sex" name="sex" type="radio" value="1"/> 男
<input id="sex" name="sex" type="radio" value="0"/> 女

3.1 回填赋值

      $('[name="sex"]:radio').each(function() {
         if (this.value == 0) {
            this.checked = true;
         }
      });

3.2 获取单选按钮的值：

var valradio = $("input[@type=radio][@checked]").val();

3.3：获取一组名为(items)的radio被选中项的值

var item = $('input[@name=items][@checked]').val();

3.4：设置value=2的项目为当前选中项:

$("input[@type=radio]").attr("checked",'2');

3.5：获取一组名为(items)的radio被选中项的值(若未被选中 则val() = undefined ):

var item = $('input[@name=items][@checked]').val();

3.6：radio单选组的第二个元素为当前选中值:

$('input[@name=items]').get(1).checked = true;

4.多选框

4.1:得到多选框的值

var checkboxval = $("#checkbox_id").attr("value")；

4.2:使其未勾选

• $("#chk_id").attr("checked",'');

4.3 勾选

$("#chk_id").attr("checked",true);

3:判断是否已经选中

if($("#chk_id").attr('checked')==true) {

...

}

5. 下拉框

5.1:获取下拉列表的值

var selectval = $('#select_id').val();

5.2 设置value=test的项目为当前选中项:

$("#select_id").attr("value",'test');

5.3 添加下拉框的option:

$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")

5.4：清空下拉框:

$("#select_id").empty()；

6：获取select被选中项的文本

var item = $("select[@name=items] option[@selected]").text();

7：select下拉框的第二个元素为当前选中值:

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

二、综合案例

1、级联选择1

 //HTML
  <label for="name">级别：</label>
    <input type="radio" name="level" id="level" class="level"> 四级
    <input type="radio" name="level" id="level" class="level"> 六级<br/>
    <label>所报班级：</label><br/>
    <select id="classType" name="classType" width="200px">
        <option value=''>请选择班型</option>
    </select>
//Javascript
<script type="text/javascript">
$(function() {
    $(".level").click(function() {
        var typeValue = $(".level").index(this);
        if (typeValue == 0) {
            $("#classType").empty();
            $("<option value=''>请选择班型</option>").appendTo("#classType");
            $("<option>大学英语四级VIP全程班</option>").appendTo("#classType");
        } else {
            $("#classType").empty();
            $("<option value=''>请选择班型</option>").appendTo("#classType");
            $("<option>大学英语六级VIP全程班</option>").appendTo("#classType");
        }
    });
    $(".level").click();
});
</script>

2、级联选择2

//HTML
考试级别：
<select id="type" class="cet" name="type">
    <option value="0">全部</option>
    <option value="1">四级</option>
    <option value="2">六级</option>
</select>
<br>
所选班型：
<select id="classType" class="cet" name="classType"></select>  
//javascript
<script type="text/javascript">
    $(document).ready(function() {
        $("#type").change(function() {
            $("#classType").empty();
            var value = $(this).val();
            if (value == 1) {
                $("<option value=''>请选择班型</option>").appendTo("#classType");
                $("<option>大学英语四级VIP全程班</option>").appendTo("#classType");
                $("<option>大学英语四级精品全程班</option>").appendTo("#classType");
            } else if (value == 2) {
                $("<option value=''>请选择班型</option>").appendTo("#classType");
                $("<option>大学英语六级VIP全程班</option>").appendTo("#classType");
                $("<option>大学英语六级精品全程班</option>").appendTo("#classType");
            }
        })
    });
</script>

2-1 Ajax级联选择

$(function(){
  $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#ctlPerson").html(options);
    })
  })
})

在线调试 / 在线演示

3. 防止重复提交

多次递交表单对于web应用来说是个比较头疼的问题，下面的代码能够很好的帮助你解决这个问题：

$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

在线调试 / 在线演示

方案1 ： 加在 按钮上

$("document").ready(function() {
    $("input:submit").each(function() {
        $(this).click(function() {
            setdisabled(this,true);
            return true;
        });
    });
    function setdisabled(obj) {
        setTimeout(function() {
            obj.disabled = true;
        }, 100);
    }
})  

特点： 点击按钮就执行，发生在  表单验证逻辑之前

将表单中的按钮禁用

下面的代码对于ajax操作非常有用，你可以有效的避免用户多次提交数据：

//禁用按钮：
$("#somebutton").attr("disabled", true);
//启动按钮：
$("#submit-button").removeAttr("disabled");

可能大家往往会使用.attr(‘disabled',false);，不过这是不正确的调用

方案2：加在 form 上

$("document").ready(function() {
    $("#form1").submit(function(){
        setdisabled($("#tj"));
    });
    function setdisabled(obj) {
        setTimeout(function() {
            obj.disabled = true;
        }, 100);
    }
})  

特点： 发生在  表单验证逻辑之后 ，表单验证不通过，不会触发。推荐采用

方案 3：

$("document").ready(function() {
    $("#form1").submit(function() {
        $("#tj").attr("disabled","true");
    });
})

如果上面方法都不灵就用这个

   var flag_submit = false;
    $(document).ready(function() {
        $("#form1").submit(function() {
            if(flag_submit){
               return false;
            }
            flag_submit = true;
        });
    })  

输入内容后启用递交按钮

$('#username').keyup(function() {
    $('#submit').attr('disabled', !$('#username').val());
});

递交按钮只有在用户输入内容后才可以启动    在线调试 / 在线演示

4.改变文本框的获得焦点的样式

//添加一个类名为focus的样式
.focus {border: 1px solid #f00; background: #fcc; } 

$(function(){
    $(":input").focus(function(){
        $(this).addClass("focus");
        }).blur(function(){
            $(this).removeClass("focus");
    });
}); 

也可对标签高亮显示

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});

在线调试 / 在线演示

5.复选框进行全选，反选，全不选操作

//全选
$("#CheckedAll").click(function(){
　　$('[name=items]:checkbox').attr('checked',true);
});
//全不选
$("#CheckedNo").click(function(){
　　$('[name=items]:checkbox').attr('checked',false);
});
//反选
$("#CheckedNo").click(function(){
　　$('[name=items]:checkbox').each(function(){
　　this.checked = !this.checked;
}));
//提交按钮
$("#send").click(function(){
　　var str = "你选中的是：\r\n";
　　$('[name=items]:checkbox:checked').each(function(){
　　str += $(this).val()+'\r\n'})
　　alert(str);
); 

6.  在表单中禁用“回车键”

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

7.清除所有的表单数据

可能针对不同的表单形式，你需要调用不同类型的清楚方法，不过使用下面这个现成方法，绝对能让你省不少功夫。

function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};