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 获取单选按钮的值：

扫描二维码关注公众号，回复： 6602920 查看本文章

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;
  });
};

转载于:https://www.cnblogs.com/JoannaQ/p/3157961.html

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

猜你喜欢