<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//需求1：点击 submit 按钮时,检查是否选择 type,若没有选择给出提示: "请选择类型";
//需求2：使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
//检查文本框中是否有输入(可以去除前后空格),若没有输入,则给出提示:"请输入内容";
//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</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-7.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>
答案赏析如下：
<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>
)
)
