返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jquery对表单操作2
  • 494
分享到

jquery对表单操作2

表单操作 2022-11-21 22:11:16 494人浏览 八月长安
摘要

checkbox的级联效果 <fORM> 你爱好的运动?<br/> <input type="checkbox" id="CheckedAll" /&

checkbox的级联效果

<fORM>
你爱好的运动?<br/>
<input type="checkbox" id="CheckedAll" />全选/全不选<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="乒乓球"/>乓球球
<input type="button" id="send" value="提 交"/>
$('#CheckedAll').click(function(){
$('[name=items]:checkbox').attr("checked", this.checked);
})

当单击id为"CheckedAll"的复选框后,复选框组将被选中,当在复选框组中取消某一个选项的选中状态时,id为"CheckedAll"的复选框并没有被取消选中状态。
为解决这个问题:

$('[name=items]:checkbox').click(
function(){
var flag = true;
$('[name=items]:checkbox').each(function(){
if(!this.checked)
flag = false;
});
$('#CheckedAll').attr('checked', flag);
})
//或者可以用复选框的总数与选中复选框数量相等
$('[name=items]:checkbox').click(
function(){
var $tmp = $('[name=items]:checkbox');
//使用filter方法筛选出复选框,并直接给CheckedAll赋值
$('#CheckedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length);
})

下拉框的应用

<div class="content">
<select multiple id="select1" style="width:100px;height:100px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<span id="add">选中添加到右边</span>
<span id="add_all">全部添加到右边</span>
</div>
</div>
<div class="content">
<select multiple id="select2" style="width:100px;height:100px;">
</select>
<div>
<span id="add">选中添加到左边</span>
<span id="add_all">全部添加到左边</span>
</div>
<div>
//将选中的选项添加给对方
$('#add').click(function(){
var $options = $('#select1 option:selected');//获取选中的选项
$options.appendTo('#select2');//追加给对方
});
//将全部的选项添加给对方
$('#add').click(function(){
var $options = $('#select1 option');//获取选中的选项
$options.appendTo('#select2');//追加给对方
});
//双击某个选项添加给对方
$('#select1').dblclick(function(){
var $options = $('option:selected',this);//获取选中的选项
$options.appendTo('#select2');//追加给对方
})

PS: $('option:selected',this),$()有2个参数,一个是选择器,一个是作用域。相当于$('#select1 option:selected')

--结束END--

本文标题: jquery对表单操作2

本文链接: https://lsjlt.com/news/173198.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • jquery对表单操作2
    checkbox的级联效果 复制代码 代码如下: <form> 你爱好的运动?<br/> <input type="checkbox" id="Chec...
    99+
    2022-11-21
    表单操作
  • jQuery对表单的操作代码集合
    改变文本框的获得焦点的样式 复制代码 代码如下: <form action="#" method="POST" id="regForm"> <fieldset>...
    99+
    2022-11-21
    表单操作
  • django--ORM的单表操作
    Django--ORM单表操作创建一个新的django项目项目目录结构:Django连接数据库配置重点:第一步:修改settings.py文件DATABASES = {     &...
    99+
    2023-01-30
    操作 django ORM
  • Python操作MySQL(2)
    查询数据 使用execute()函数执行查询sql语句后,得到的只是受影响的行数,并不能真正拿到我们查询的内容。没关系,这里游标cursor中还提供了三种提取数据的方法:fetchone、fetchmany、fetchall,每个方法都会...
    99+
    2023-01-31
    操作 Python MySQL
  • python3对emqtt的简单操作
    需要先下载外部包 pip install paho-mqtt 发布者 import paho.mqtt.client as mqtt HOST = "192.168.44.31" PORT = 1883 def Publish_Mess...
    99+
    2023-01-31
    操作 简单 emqtt
  • mysql (2)-单表查询
    简单查询 查询一个字段:   select 字段名 from 表名; 其中要注意:   select和from都是关键字。  字段名和表名都是标识符。 强调:   对于SQL语句来说,是通用的,  所有的SQL语句以“...
    99+
    2019-05-11
    mysql (2)-单表查询
  • JavaScript中怎么实现表单操作和表单域
    JavaScript中怎么实现表单操作和表单域,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一、表单的获取方式1.docume...
    99+
    2024-04-02
  • 2、操作数据库
    操作数据库 操作数据库 > 操作数据库中的表 > 操作数据库中表的数据 MySQL关键字不区分大小写 2.1、操作数据库(了解) 创建数据库 CREATE DATABASE westos; 删除数据库 DROP DATABASE ...
    99+
    2022-01-25
    2 操作数据库 数据库入门 数据库基础教程 数据库 mysql
  • python 文件操作2
    继续讲解文件操作的其他内置方法读取文件句柄的指针指针,就是说,程序读取文件到哪一行了。f = open("Yesterday.txt",'r',encoding="utf-8...
    99+
    2023-01-30
    操作 文件 python
  • JQuery如何实现动态操作表格
    这篇文章给大家分享的是有关JQuery如何实现动态操作表格的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空...
    99+
    2024-04-02
  • MySQL(2)-SQL语句和库表的基本操作
     一 . 初识SQL语言SQL (Structured  Quqry  Language) : 结构化查询语言 , 主要用于存取数据 , 查询数据 , 更新数据和管理关系数据库系统SQL语言分为3种类型 ,...
    99+
    2024-04-02
  • Java实现单链表的操作
    本文实例为大家分享了Java实现单链表的基本操作,供大家参考,具体内容如下 顺序表:物理上逻辑上都连续;链表:物理上不一定连续,逻辑上一定连续的。 链表的概念及结构 概念:连表示一种...
    99+
    2024-04-02
  • jquery对元素的基本操作有哪些
    这篇文章主要介绍“jquery对元素的基本操作有哪些”,在日常操作中,相信很多人在jquery对元素的基本操作有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery...
    99+
    2024-04-02
  • MongoDB(2): 增删改操作
    附加命令:1、进入前端操作命令./mongo [ip:端口]说明:默认会自动选本地,端口270172、显示所有的库> show dbs;   ...
    99+
    2024-04-02
  • 数据库的单表查询操作
    数据库的单表查询操作?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。单表查询指的是在一张表中进行数据的查询,它的执行顺序是“fr...
    99+
    2024-04-02
  • OGG 单表初始化操作步骤
    有时候ogg两端数据不一致,且数据量较大,手工修改比较复杂的情况下,我们需要对这些表进行初始化。初始化的大概思路是:停止两端OGG如果业务不可以停很长时间,就需要配置目标端进程,暂停这些问题表的同步。待新数...
    99+
    2024-04-02
  • Java实现单链表基础操作
    关于链表 链表是有序的列表链表是以节点的方式来存储每个节点包含data域,next域(指向下一个节点)分带头节点的链表和没有头节点的链表 定义一个节点: package linke...
    99+
    2024-04-02
  • JavaScript操作表单的示例分析
    这篇文章主要为大家展示了“JavaScript操作表单的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript操作表单的示例分析”这篇文章吧...
    99+
    2024-04-02
  • JavaScript实现表单元素的操作
    目录一、forms[]; Form 表单对象1、属性2、方法3、事件二、表单元素1、输入标记2、输入类控件的type可选值3、elements[]; Element 表单元素对象4、...
    99+
    2024-04-02
  • jquery对元素的基本操作实例分析
    jQuery简介 jQuery是JS的一个类库,对JS中的某些功能进行封装,让DOM操作变得简单,使代码简洁,易于使用,且支持链式写法,兼容性好。 jQuery的设计思想和主要用法即...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作