Jquery常用表单元素操作总结

页面当中经常要做一些checkbox,radio,select,input等表单元素的操作。做为我这样的懒人早就该总结以下,免去用到的时候,不想从头写,又不得不去以前的代码中翻。下面的代码来自实际项目中,亲测可用。呵呵……

一、checkbox

对checkbox的判断往往是checkbox有没有被勾选。也经常有一个复选框控制其它全部复选框的选中和取消选中。如下图:

页面左上角的复选框的选中控制表格中所有的复选框。代码如下:

为了操作方便,给控制全选的复选框增加一个id叫checkAll

下面的代码实现了全选和反选的效果

<th><input type="checkbox" id="checkAll"/></th>

$(‘#checkAll‘).change(function(){
    if($(this).is(‘:checked‘)){
        $("input[type=‘checkbox‘]").prop("checked", true);
    }else{
        $("input[type=‘checkbox‘]").prop("checked", false);
    }
});

获取所有选中的checkbox的值

以上图为例,我要获取表格中每一行记录的id值,则给每一个checkbox增加一个value属性,在渲染页面时将value值写到checkbox中即可。另外为了方便选取checkbox为所有的checkbox增加了一个chkbox的class。

<td><input type="checkbox" value="{{ record.id }}" class="chkbox"/></td>

function checkValue(){
    var arr = ‘‘
    $(".chkbox").each(function(){
        if($(this).is(":checked")){
            arr += ($(this).val() + ‘,‘)
        }
    })
    return arr
}

未完待续……

时间: 2024-10-27 09:15:24

Jquery常用表单元素操作总结的相关文章

基于JQuery实现表单元素值的回写

form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html &

jquery设置表单元素为不可用代码实例

jquery设置表单元素为不可用代码实例:本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t

html常用表单元素(组件)

html常用表单元素(组件): 语法: <input type = ?/> 总共有10种,另外两种为文本域textarea,下拉列表选择框 select 问号代表的有以下十种: 1. 文本框(默认——如果没有指定type,默认显示文本框) text 语法<input /> 2.密码框——password 3.单选按钮——radio 4.复选框——checkbox 5.普通按钮——button 6.提交按钮——submit 7.重置按钮——reset 8.文件域——file 9.图像

用jquery获取表单元素

表单验证需要获得表单元素,下面是获取表单元素的方法 例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script src="js/jquery-1.6.min.js" type="text/javascript"></script

jQuery选取表单元素

表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input>元素. :checkbox             type属性值为checkbox的<input>元素.使用$([type="checkbox"])能获得更高的性能. :checked               选中的单选按钮和复选框元素. :disabled    

jquery常用表单操作

//js将表单序列化成对象 $.fn.serializeObject = function () { var $els = $(this).find("[name]"); var formData = {}; var len = $els.length; for (var i = 0; i < len; i++) { var $item = $($els[i]); var name = $item.attr("name"); var type = $item.

用jquery获取表单元素(二)

获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").attr('checked')==true)  //判断是否已经打勾    --注:name即控件name属性,value即控件value属性 第二种: 可以不指定属性值,因一组checkbox的value值都会保存其在数据库中对应的id,最好写成如下方式: if($("input[name=row_checkbox]").attr

jQuery Mobile_表单元素

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 7

jQuery常用表单事件执行顺序

<input type="text" id="input"/> <script> // 点击测试 var input = document.getElementById("input"); $('input').hover(function(){ console.log("hover-in"); },function(){ console.log("hover-out"); });