今天,当制作一个不需要from表单的复选框来提交数据的小函数时,需要在复选框被选中或未选中的情况下修改一些后台数据。我想到了用js代码来监控复选框的状态,并将实时数据发送到后台。...关于js代码如何监控checkbox的状态,可以参考下面的例子。 复选框选择和取消选择触发事件的方法。 Jq代码_ _点击复选框触发事件我是复选框。 $('#isbox ')。...; }否则{ Console.log('我没有被选中!'); } }); //这个代码和上面那个一样,随便选一个用! $('input[type='checkbox']')。...; }否则{ Console.log('我没有被选中!'); } }); 本机JS代码_ _单击复选框触发事件。 例如:我是复选框。...功能检查(e) 如果(已检查){ console . log(“checked”); }否则{ Console.log('未选中'); } } 例如:我是复选框。
本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 JavaScript最初的一个应用场景就是分担服务器处理表单的责任,打破处处依赖服务器的局面,这篇文章主要介绍...(也就是属性disabled为true的) 只发送勾选的复选框和单选按钮 不发送type为reset和button的按钮 多选选择框中每个选择的值单独一个条目 在单击提交按钮表单的情况下,也会发送提交按钮的...需要有name属性(条件为"真") 不能是fieldset元素 不能是已经禁止的元素(即disable为true) 不能是submit、reset、button、file等元素 对于单选和多选控件,只发送已经勾选的...如果没有传入回调函数则触发当前表单submit事件,并且执行默认的提交表单行为(前提是没有阻止浏览器默认行为) 源代码 $.fn.submit = function(callback) { //...注意这里只是手动触发绑定的submit事件,并不会提交表单 this.eq(0).trigger(event) // 如果没有阻止默认事件,便调用form.submit()提交表单
(也就是属性disabled为true的) 只发送勾选的复选框和单选按钮 不发送type为reset和button的按钮 多选选择框中每个选择的值单独一个条目 在单击提交按钮表单的情况下,也会发送提交按钮的...需要有name属性(条件为"真") 不能是fieldset元素 不能是已经禁止的元素(即disable为true) 不能是submit、reset、button、file等元素 对于单选和多选控件,只发送已经勾选的...如果没有传入回调函数则触发当前表单submit事件,并且执行默认的提交表单行为(前提是没有阻止浏览器默认行为) 源代码 $.fn.submit = function(callback) { //...注意这里只是手动触发绑定的submit事件,并不会提交表单 this.eq(0).trigger(event) // 如果没有阻止默认事件,便调用form.submit()提交表单...向zepto.js学习如何手动触发DOM事件 谁说你只是"会用"jQuery? ajax模块 原来你是这样的jsonp(原理与具体实现细节)
- 注意事项:参数列表中的参数可以不写类型 - 事件 "具体的某件事情" - 单击事件: onclick "单击鼠标时触发" - 表单提交事件...: onsubmit "提交form表单时触发" - 页面加载成功事件: onload "当页面加载完毕后触发" - 事件和事件源的绑定...(参数,参数){} 调用函数: 函数名(参数,参数); 返回值: return 返回值; 事件 onclick:单击事件 onsubmit:表单提交事件...需求分析: 当表单提交的时候,校验表单中的用户名和密码是否符合格式,如果不符合,则在相应的输入框后面填写提示信息且不允许表单提交, 反之可以提交 技术分析: 事件 正则表达式:...style.backgroundColor = "颜色"; }else{ trObjArr[i].style.backgroundColor = "颜色"; } } 案例3-复选框全选和全不选
表单标签 用表单标签来完成服务器的一次交互 分成两个部分: 表单域:包含表单元素的区域,重点是form标签. 表单控件:输入框,提交按钮等,重点是input标签....gender" checked="checked">男 女 (4)复选框...当type取值为checkbox时表示的是复选框,可以只选一个或多个....">睡觉 打豆豆 (5)普通按钮 当前按钮点击以后无反应,需要搭配JS...type=blog"> (5)清空按钮 (5)提交文件 <input type="file
;readonly属性的input元素的数据可以被提交到服务器; 建议:readonly属性需要谨慎使用(无视觉信号告知用户禁止编辑,用户不能输入,让用户困惑),应该考虑使用hidden类型的input...,只有处于勾选状态的复选框的数据值会发送给服务器(checkbox型input元素的数据项如果不存在于提交项中,则表明用户未勾选)。...,且检查效果各不相同。...用input元素生成图像按钮和分区响应图 image型input元素生成的按钮显示为一幅图像,点击它可以提交表单。 ?...用input元素上传文件 input元素类型是file型,它可以在提交表单时将文件上传到服务器。
checkbox: 设置是否显示节点前的复选框。cascadeCheck: 设置是否级联勾选子节点。onSelect: 设置节点被选中时的回调函数。3.5.2 使用示例<!...3.6 Form 表单组件Form 表单组件可以将各种表单元素(如输入框、下拉框、复选框等)组合在一起,形成一个完整的表单,用户可以在表单中输入信息并提交给服务器进行处理。...3.6.1 主要属性url: 设置表单提交的目标 URL 地址。method: 设置表单提交的方法,通常为 "GET" 或 "POST"。...onSubmit: 设置表单提交时的回调函数,用于进行表单验证等操作。3.6.2 使用示例<!...表单的提交目标 URL 地址为 "submit.php",提交方法为 "POST"。
1.使用JS完成表单校验 分析思路 1.确定使用事件onsubmit事件 2.书写函数 3.对输入项进行非空判断 为表单绑定一个事件 <form action="#" method...需要校验的输入项目定义id //document.getElementById("user"); //获取输入表单对象...onsubmit:表单提交事件 ,有返回值,控制表单是否提交。...onchange:当用户改变内容的时候使用这个事件(二级联动) 7.使用JS完成全选和选不选操作 技术分析 确定事件(鼠标单击事件onclick),事件绑定到编号前面的复选框里面 获取编号前面的复选框的状态..."checkAll()" id="checkAll"/> 下面所有的复选框: JS部分代码
checkbox: 设置是否显示节点前的复选框。 cascadeCheck: 设置是否级联勾选子节点。 onSelect: 设置节点被选中时的回调函数。 3.5.2 使用示例 <!...3.6 Form 表单组件 Form 表单组件可以将各种表单元素(如输入框、下拉框、复选框等)组合在一起,形成一个完整的表单,用户可以在表单中输入信息并提交给服务器进行处理。...3.6.1 主要属性 url: 设置表单提交的目标 URL 地址。 method: 设置表单提交的方法,通常为 “GET” 或 “POST”。...onSubmit: 设置表单提交时的回调函数,用于进行表单验证等操作。 3.6.2 使用示例 <!...表单的提交目标 URL 地址为 “submit.php”,提交方法为 “POST”。
用户向服务器端发送数据时,一次只能提交一个表单中的数据。如果要提交多个表单就需要用js中的异步交互。 表单元素 method属性:提交表单时所用的http方法,默认为get方法。...就设置成了禁止拖动文本框的大小。 label表单标注标签,扩大点击范围。 比如下图: 只能点击到框里面才有用,扩大点击范围之后,点在框的旁边也有用。 一般与单选按钮,复选框组合使用。...关联式方式: disabled属性:禁用表单元素,被禁用的元素不可用,不可点击,不会被提交 readonly属性:只读属性,不能修改,可以被提交 代码参考如下: ```css 我没有邮箱 图示如下: 时间比较紧迫,没有写详细样式,以上供大家参考。
btn.bind("click", function(){ // 给“新增”图标按钮绑定点击事件 currentZtreeNode = treeNode; // 保存点击的节点,作为新增资源节点的父节点,在提交表单时使用...,获取表单组件 name属性,表单设计 name属性值和id属性值是一样的,所以也就获取表单组件id var dataArray = $(resourceFormSelector...setting.check.enable 设置 zTree 的节点上是否显示 checkbox / radio 默认值: false 参数值:true / false 分别表示 显示 / 不显示 复选框或单选框...勾选 或 取消勾选 单个节点。...* * ztree 设置 * */ setting = { view: { selectedMulti: false }, check: { enable: true, // 表示显示复选框或单选框
Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 吹着表单或基本表单 向父 元素添加 role="form"。.../bootstrap.min.css" rel="stylesheet"> 请打勾 提交...input type="checkbox"> 请打勾 提交
获取表单元素的数组 document.forms.shipping.elements.method 即可 将会获取到表单的属性 表单和元素属性 js的对象支持两个方法,一个为submit()一个为reset...还有一个onreset事件处理程序来检测表单的重置。表单提交前将会调用onsubmit程序,如果回调函数的返回值为false则会取消表单的提交动作。这是js程序一个用来检查用户的输入错误。...click事件 当按钮表单元素激活的时候,将会触发click事件。(即使是通过键盘而不是通过鼠标,该事件都会触发)。单选框和复选框也具有click事件。...提交和重置元素本就是按钮,不同的是它们有与之相关联的默认动作。 即,按钮和超链接类似,都具有共同的作用。 开关按钮 复选框和单选元素为开关按钮,或称之为有两种视觉状态的按钮。即选中或未选中。...利用表单属性的名字选中元素时,它返回的一个类数组对象而不是单个元素。 单选和复选框都定义了checked属性,指定了元素当前是否选中。
) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交?...关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值。...(该对象开发中不怎么常用) 五 、使用 JS 完成注册页面表单校验 JS的事件 ? 1.需求分析 之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果极差!...onsubmit:表单提交事件 ,有返回值,控制表单是否提交。...onchange:当用户改变内容的时候使用这个事件(二级联动) 七、使用JS完成全选和选不选操作 1.需求分析 我们希望在后台系统实现一个批量删除的操作(全选所有的复选框) 2.技术分析 确定事件(鼠标单击事件
-3.5.min.js"> <script type="text/javascript" src="${ctx }/components/zTree/<em>js</em>/jquery.ztree.excheck...= { check: { // <em>复选框</em>可用 enable: true }, data: { // 定义使用简单json数据格式,如下所示...treeDemo"), setting, data); zTreeObj.expandAll(true);//true:展开所有节点 } // 5.实现权限分配(zTree树复选框提交时...(true);//true:被勾选,false:未被勾选 //2.循环nodes,获取每个节点的id, 拼接模块字符串(以,分隔) var moduleIds = "";...$("#icform").submit(); // 提交表单 } 树菜单 <!
-- 所有浏览器都支持的一个css属性 --> opacity: 0.5; 如何通过选中文字来勾选/取消复选框 想要在选中文字的时候就自动勾选或取消复选框,有两种实现的方式: 方式一:在复选框的外边包上...="checkbox" id="check1"> 55555555555 另外,当复选框和文字无法对齐的时候,可以在复选框里添加style="vertical-align...类似的属性属性还有: 禁止鼠标右键:oncontextmenu="return false" 禁止拖放:ondragstart="return false" 禁止拷贝:oncopy=document.selection.empty...break-word; word-break:break-all; word-wrap word-wrap用来控制换行,有两种取值: normal break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题...JS文件本身的编码默认为ANSI编码,而引入该JS文件的页面则使用了utf-8编码,所以导致了中文乱码。
. 标签 表单标签 文本框,密码框,单选框相关知识点 复选框相关知识点 附件框----用于文件上传 重置按钮----reset 普通按钮 隐藏域 只读属性和设置不可用属性...后面是参数列表 如果单选框里面不指定value属性,那么提交给数据库里面的数据显示都为on,无法区分选择的性别是什么 这里参数列表里面没有用户名和密码,说明用户名和密码没有被提交,之所以没有被提交...效果演示: 为什么提交后,参数列表没有显示呢?...重置按钮----reset ---- 普通按钮 注意:如果要设置按钮名字,可以通过设置value属性来完成 效果演示: 这里普通按钮设置后,点击没有用,需要和js的事件取连着用 ----...: 净量使用post方法提交表单
及没有时添加,有的时候删除。...3.3 案例实现 // 复选框的全选和全不选: $(function(){ // 步骤一:为上面的复选框绑定单击事件: $("#selectAll").click(function(){ /*if(this.checked...== true){ // 如果上面的复选框被选中: $("input[name='ids']").prop("checked",true); }else{ // 上面的复选框没有被选中 $("input.../js/messages_zh.js" type="text/javascript" charset="utf-8" /> 9.2.3 使用前提 validate需要手动的声明,对那个表单进行校验,及需要手动调用.../js/messages_zh.js" type="text/javascript" charset="utf-8" /> 12.2.3 使用前提 validate需要手动的声明,对那个表单进行校验,手动方式可以使用以下
表单标签 表单是让用户输入信息的一种途径,这些输入框就是一个表单,表单分成表单域和表单控件两个部分 3.2.1. input 标签 可以输入各种组件,如单行文本框,密码框,按钮,单选框,复选框等,type...checked="checked">女 复选框:可以勾选多个 复选框 篮球 足球...普通按钮: 普通按钮 提交按钮:代码中没有写 value 按钮上也是有提交字样的 提交按钮 下拉框...表单域 表单域就是包含表单元素的区域,也就是可以包含上面控件的区域,用 form 标签表示,表单控件中的内容最终都会通过表单域提交 action 中填的就是最终要提交的路径,method 表示提交数据的方式 4.
可悲的是,当我在 Vue 中查看单选按钮或复选框的自定义输入的示例时,他们根本没有考虑 v-model ,或者没有正确的使用。...对于自定义文本输入有一些不错的文档,但由于它们没有解释自定义的单选框或复选框,我们将在本文进行讨论。 本教程旨在......1':'0'"> 单一复选框的情况差不多就是这样。如果有多个复选框共享一个模型,那么这些复选框将填充一个数组,其值为所有勾选了的复选框,但一定要确保传入的模型是数组类型,否则会产生一些奇怪的行为。...)和多个复选框将所有检查的值合并到一个数组中。...你可能会认为我们需要确定是否有其他复选框具有相同的 name 属性,但这并不是 Vue 的内置系统所使用的。就像单选框一样,Vue 根本不考虑 name 属性,它只是在本地提交表单时使用。
领取专属 10元无门槛券
手把手带您无忧上云