Jquery练习题—实现分组添加功能

实现分组添加功能：

<title>Insert title here</title>

$(function(){

//需求1：点击 submit 按钮时,检查是否选择 type,若没有选择给出提示: "请选择类型";

//需求2：使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.

//检查文本框中是否有输入(可以去除前后空格),若没有输入,则给出提示:"请输入内容";

//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点

</script>

</head>

<body>

<p>你喜欢哪个城市?</p>

</ul>

<p>你喜欢哪款单机游戏?</p>

</ul>

<input type="radio" name="type" value="city">城市

<input type="radio" name="type" value="game">游戏

name: <input type="text" name="name"/>

</form>

</body>

答案赏析如下：

<scripttype="text/javascript">

$(function(){

//需求2：使包括新增的 li 都能响应 onclick 事件:弹出 li 的文本值.

function showContent(li){

alert($(li).text());

}

$("li").click(function(){

showContent(this)

});

//需求1：点击 submit 按钮时,检查是否选择type,若没有选择给出提示: "请选择类型";

$(":submit").click(function(){

var $type = $(":radio[name='type']:checked");

if($type.length == 0 ){

alert("请选择类型");

return false;

}

var typeVal =$type.val();

//检查文本框中是否有输入(可以去除前后空格),若没有输入,则给出提示:"请输入内容";

var $text = $(":text[name='name']");

var textVal =$.trim($text.val());

$text.val(textVal);

if(textVal == ""){

alert("请输入内容");

return false;

}

//alert("^^"+　textVal+ "__");

//若检查都通过, 则在相应的 ul 节点中添加对应的li 节点

$("<li>" + textVal +"</li>").appendTo($("#" + typeVal))

.click(function(){

showContent(this)

});

$text.val("");

return false;

});

})

</script>

Jquery练习题—实现分组添加功能相关推荐

php表格tr,jQuery+ajax实现动态添加表格tr td功能示例
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: ajax部分: va ...
ASP.NET MVC 2入门演练 3 - 列表和添加功能
一.列表显示-View:List.aspx 此功能实现起来比较简单,之前我们在Site.Master添加了如下一行代码: <li><%: Html.ActionLink(" ...
struts实战--添加功能（重点文件上传）
struts实现添加功能(重点上传) 一.对add.jsp页面上html标签修改----struts2的表单标签 1.性别原标签 <input ...
添加功能---jsp,servlet
接上篇:>>>列表查询,添加功能---JSP,servlet_笼中鸟-CSDN博客一.jsp之间的跳转 list.jsp >> <%@ page language ...
列表查询，添加功能---JSP，servlet
1.列表查询以及添加功能的需求列表查询功能: *用户可以通过点击一个超链接或者按钮,经过UserListServlet 类处理后,跳转到查询后的界面list.jsp *使用Druid数据库连接池技术 ...
jquery thinkphp mysql_ThinkPHP5+jQuery+MySql如何实现投票功能
ThinkPHP5+jQuery+MySql如何实现投票功能发布时间:2020-12-30 10:03:21 来源:亿速云阅读:64 作者:小新这篇文章主要介绍了ThinkPHP5+jQuery ...
通过xhr实现文件上传功能，使用jQuery实现文件上传功能
目录一.使用xhr实现文件上传功能 1.定义UI结构 2.验证用户是否选择了文件 3.向FormData中追加文件 4.使用xhr发起上传文件的请求 5.监听onreadyStatechange事件 ...
使用Jquery完成动态表格的功能
使用Jquery完成动态表格的功能 1. 代码展示: <!doctype html> <html lang="en"> <head><me ...
html表格td向下排序,jquery实现的table排序功能示例
本文实例讲述了jquery实现的table排序功能.分享给大家供大家参考,具体如下: Document div { width: 1024px; margin: 0 auto; /*div相对屏幕左右 ...

Jquery练习题—实现分组添加功能

Jquery练习题—实现分组添加功能相关推荐

最新文章

热门文章