jQuery——表单应用(4)

HTML:

<!--复选框应用-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <form>
            你爱好的运动是?<br />
            <input type="checkbox" name="items" value="足球"/>足球
            <input type="checkbox" name="items" value="篮球"/>篮球
            <input type="checkbox" name="items" value="羽毛球"/>羽毛球
            <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br />
            <input type="button" id="checkall" value="全 选"/>
            <input type="button" id="checkno" value="全不选"/>
            <input type="button" id="checkrev" value="反 选"/>
            <input type="button" id="send" value="提 交"/>
        </form>
        <script type="text/javascript">
            $("#checkall").click(function(){
                $(‘[name=items]:checkbox‘).attr(‘checked‘, true);
            })
            $(‘#checkno‘).click(function(){
                $("[name=items]:checkbox").attr("checked", false);
            })
            $("#checkrev").click(function(){
                $("[name=items]:checkbox").each(function(){
                    this.checked = !this.checked;
                })
            })
            $("#send").click(function(){
                var str = "你选中的是:";
                $("[name=items]:checkbox:checked").each(function(){
                    str = str + $(this).val() + ",";
                })
                alert(str);
            })
        </script>
    </body>
</html>

END

时间: 2024-08-06 15:40:25

jQuery——表单应用(4)的相关文章

【jQuery基础学习】06 jQuery表单验证插件-Validation

jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script

jQuery表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. 三.jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到 js 代码中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

jquery表单验证

js表单验证,这是个人做的总结,需要的请留言 需要文件:jquery.js, validator.js, validator.css, add.xml xml文件: <?xml version="1.0" encoding="utf-8"?> <root box="errorbox"> <username> <required>请填写姓名</required> </username

jquery表单序列化

http://gongwen.sinaapp.com/article-206.html jquery表单序列化,数据格式转成json格式;用的时候直接$('#FormId').serializeJson();便可. 代码如下: //jquery插件把表单序列化成json格式的数据start (function($){ $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); var s

Jquery表单提交方式

1.使用调用submit方法 function tes1(){ //执行判断 if(校验通过){ $("#formId").submit(); }else{ return; } } 2.使用ajaxSubmit 方法,用到jquery.form.js $("#picForm").ajaxSubmit({ type: "post", dataType: "text", success: function(result){ ale

【jquery】Validform,一款不错的 jquery 表单验证插件

关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实! 功能简介 可以在 input 上直接绑定正则,可

JQuery 表单验证--jquery validation

jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>jQuery validatio

第七章(插件的使用和写法)(7.2 jQuery 表单插件 ----- Form)

7.2 jQuery 表单插件 ----- Form 7.2.1 Form 插件简介 jQuery Form 插件是一个优秀的 Ajax 表单插件,可以非常容易地.无侵入地升级 HTML 表单以支持 Ajax.jQuery Form 有两个核心方法----- ajaxForm()  和 ajaxSubmit() .它们集合了从控制表单元素到决定如何管理提交进程的功能,另外,插件还包括其他一些方法: formToArray() / formSerialize() / fieldSerialize(

jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 三.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 四.详细代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

JQuery 表单校验插件 validate 实践纪录

JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有插件对应, validate插件便是一个. 官网地址 : http://jqueryvalidation.org/ 官网文档:http://jqueryvalidation.org/documentation/ 下面网址是开发者提供的demo, 代码可下载, 可以给大家提供参考: http://jq