Jquery基础添加删除内容
直入主题,工作中比较常用的功能在input框内添加内容,不白话了,上代码!
布局:
<div id="content">
<input type="text" id="change">
<button id="add">添加</button>
<ul class="city">
<li><input type="checkbox" value="上海">上海</li>
<li><input type="checkbox" value="北京">北京</li>
<li><input type="checkbox" value="南京">南京</li>
<li><input type="checkbox" value="哈尔滨">哈尔滨</li>
<li><input type="checkbox" value="齐齐哈尔">齐齐哈尔</li>
<li><input type="checkbox" value="天津">天津</li>
<li><input type="checkbox" value="陕西">陕西</li>
<li><input type="checkbox" value="山西">山西</li>
</ul>
</div>
JQuery:
$(function(){
var cityarr=[];/*创建一个数组*/
$("#change").click(function(){
$(".city").show(); /*控制城市列表的显示*/
})
$("#add").click(function(){
cityarr.length = 0;/*清空数组内容*/
$("input").each(function(){
if($(this).is(':checked')){/*判断是否被选中*/
cityarr.push($(this).val()); /*把被选中内容添加到数组中*/
}
})
console.log(cityarr)
$("#change").val(cityarr);/*将数组元素添加到input标签内部*/
})
})
执行图片:
1.点击按钮框之后:
2.选择内容点击确定之后:
有可能小伙伴们再想如果点击“添加按钮”之后隐藏“城市这块”,来看代码!
$(function(){
var cityarr=[];/*创建一个数组*/
$("#change").click(function(){
$(".city").show(); /*控制城市列表的显示*/
})
$("#add").click(function(){
cityarr.length = 0;/*清空数组内容*/
$("input").each(function(){
if($(this).is(':checked')){/*判断是否被选中*/
cityarr.push($(this).val()); /*把被选中内容添加到数组中*/
}
})
$("#change").val(cityarr);/*将数组元素添加到input标签内部*/
$(".city").hide();/*隐藏城市*/
})
})
只需要在下面添加:$(".city").hide(); 就可以实现了。
执行图:
这样小伙伴们如果类似的功能的话,也可以自己改改,比较常用,本人小白一枚,可以互相交流,大神路过写的有不当之处跪求指点!!!
Jquery基础添加删除内容的更多相关文章
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- jQuery动态添加删除与添加表行代码
具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...
- jQuery动态添加删除select项
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- jQuery基础知识— 获得内容和属性
jQuery拥有可操作HTML元素和属性的方法. 获得内容: text()--设置或返回所选元素的文本内容 html()--设置或返回所选元素的内容(包括HTML标记) val()--设置或返回表单字 ...
- jQuery基础知识— 获得内容和属性
jQuery拥有可操作HTML元素和属性的方法. 获得内容: text()--设置或返回所选元素的文本内容 html()--设置或返回所选元素的内容(包括HTML标记) val()--设置或返回表 ...
- Jquery动态添加/删除表格行和列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery CSS 添加/删除类名
addClass(class) — 为每个匹配的元素添加指定的类名.参数 : class — 一个或多个要添加到元素中的CSS类名,请用空格分开(String)示例 一 :为匹配的元素加上 'sele ...
- jquery动态添加/删除 tr/td
<head runat="server"> <title></title> <!--easyui --> <link rel= ...
随机推荐
- 升级Cocoapods引起的Mantle库找不到的问题及解决方法
年前升级了Cocoapods库,从0.39升级到了1.2.0-beta版,然后用模拟器和真机测试都是没有问题的,均可以成功编译.今天测试人员要测试包,准备archive打包时,却提示:ld: libr ...
- .Net之用户控件笔记
前端初始化: 记录点:不需要写jquery的onload,只需要在<script></script>里面直接调用 <script type="text/java ...
- Lua语法要点
本文在我的独立博客中的链接:https://www.bughui.com/2017/04/01/lua-grammar-points/ 这篇文章其实是我在四月一号发布的,由于我重新注册了一个博客园帐号 ...
- 通过 BitNami 轻松安装 Redmine
一.简介 最近彭老师要我搭建 Redmine 来管理 WPF 项目,至于问什么要选择 Redmine 网上的资料都有说明,在这里就不做过多评论.查阅了好久资料,走了不少弯路,像我这样的新手,如果严格按 ...
- 跨server传输数据注意事项
我们需要模拟客服端 首先导入相关的jar包 文件,Jersey的相关jar包 实现客服端的代码为: @Test public void testClient() { //图片生成 ...
- IP地址冲突
IP地址冲突问题.. IP地址冲突多数是由于同一局域网内,有2台或者多台电脑设置了同一个本地IP地址,导致局域网内部IP冲突导致,,建议尽量将本地IP地址设置为自动获取--然后查看自动获取的IP地址是 ...
- WebGL开发入门
Getting started with WebGL development WebGL开发入门 What is Unity WebGL? 什么是Unity WebGL? The WebGL b ...
- [2015-11-23]分享一个批处理脚本,创建iis站点及程序池
建站批处理 batch_createSites.bat @echo off rem 以管理员身份执行本脚本,可添加多条call 以建立多个站点 call path\to\createSites.bat ...
- 手工删除crfclust.bdb文件
环境:RHEL 6.5 + Oracle 11.2.0.4 RAC 现象:巡检发现自己的测试环境节点2的空间使用率过高,进一步查询,发现大文件是GI目录下crfclust.bdb文件. crfclus ...
- poj 3177-3352边双联通
买一送一啊 3177和3352的区别在于3177数据有重边!但是我先做3177的 那么就直接ctrl+c+v搞3352了~. 题意:给一个无向图,要令每个点之间至少有两条不重合的路,需要至少加多少 ...