1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 //需求2：使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. 10 function showContent(li){ 11 alert($(li).text()); 12 } 13 $("li").click(function(){ 14 showContent(this) 15 }); 16 17 //需求1：点击 submit 按钮时,检查是否选择 type,若没有选择给出提示: "请选择类型"; 18 $(":submit").click(function(){ 19 var $type = $(":radio[name='type']:checked"); 20 if($type.length == 0 ){ 21 22 alert("请选择类型"); 23 return false; 24 } 25 var typeVal = $type.val(); 26 //检查文本框中是否有输入(可以去除前后空格),若没有输入,则给出提示:"请输入内容"; 27 var $text = $(":text[name='name']"); 28 var textVal = $.trim($text.val()); 29 $text.val(textVal); 30 if(textVal == ""){ 31 alert("请输入内容"); 32 return false; 33 } 34 //alert("^^" + textVal + "__"); 35 //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 36 $("<li>" + textVal + "</li>").appendTo($("#" + typeVal)) 37 .click(function(){ 38 showContent(this) 39 }); 40 $text.val(""); 41 return false; 42 }); 43 }) 44 </script> 45 </head> 46 <body> 47 48 <p>你喜欢哪个城市?</p> 49 50 <ul id="city"> 51 <li id="bj">北京</li> 52 <li>上海</li> 53 <li>东京</li> 54 <li>首尔</li> 55 </ul> 56 57 <br><br> 58 <p>你喜欢哪款单机游戏?</p> 59 <ul id="game"> 60 <li id="rl">红警</li> 61 <li>实况</li> 62 <li>极品飞车</li> 63 <li>魔兽</li> 64 </ul> 65 <br><br> 66 <form name="myform"> 67 68 <input type="radio" name="type" value="city">城市 69 <input type="radio" name="type" value="game">游戏 70 71 name: <input type="text" name="name"/> 72 73 <input type="submit" value="Submit" id="submit"/> 74 75 </form> 76 </body>
运行结果：
