ex-4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
//****知识: 在 js 中 null, undefined, 0, false 都可以作为 false 使用, 除此以外可以作为 true 使用
//需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
// 检查文本框中是否有输入(可以去除前后空格), 若没有输入, 则给出提示: "请输入内容";
//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点
$(document).ready(function(){
//点击现实文本信息
function showContent(li){
alert("^_^" + $(li).text()) ;
}
//给 li 节点增加方法
$("li").click(function(){
showContent(this) ;
}) ;
$("#submit").click(function(){
//获取 radio 的状态类型,并进行判断
var $type = $(":radio[name='type']:checked") ;
if($type.length == 0) {
alert("请选择类型") ;
return false ;
}
//获取 text 的内容.并进行加工处理
var $content = $(":text[name='name']").val() ;
$content = $.trim($content) ;
$(":text[name='name']").val($content) ;
//判断文本信息是否为 ""
if($content == "") {
alert("请输入内容");
return false ;
}
//将新输入的文本信息,增加到相应的类型中, 并给新增加的节点添加方法
$("<li>" + $content + "</li>").appendTo($("#" + $type.val())).click(function(){
showContent(this) ;
}) ;
//禁止了 submit 的自动提交
return false ;
}) ;
}) ;
</script>
</head>
<body>
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj" name="BeiJing">
北京
</li>
<li>
上海
</li>
<li>
东京
</li>
<li>
首尔
</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">
红警
</li>
<li>
实况
</li>
<li>
极品飞车
</li>
<li>
魔兽
</li>
</ul>
<br>
<br>
<form action="dom-5.html" name="myform">
<input type="radio" name="type" value="city">城市<input type="radio" name="type" value="game">游戏
name: <input type="text" name="name"/><input type="submit" value="Submit" id="submit"/>
</form>
</body>
</html>