<html>
<head>
<meta?charset=UTF-8?/>
<title></title>
<style?type="text/css">
*?{
margin:?0;
padding:?0;
}
fieldset?{
width:?500px;
margin:?30px;
padding:?20px;
}
.dish,?.chosenDish?{
border:?1px?solid?#aaa;
width:?100px;
padding:?10px;
text-align:?center;
float:?left;
margin-right:?10px;
}
.chosenDish?{
position:?relative;
background:?#aaa;
}
.chosenDish?span?{
position:?absolute;
top:?5px;
right:?5px;
cursor:?pointer;
background:?#fff;
}
</style>
<script?id="jquery_180"?type="text/javascript"?class="library"?src="/js/sandbox/jquery/jquery-1.8.0.min.js"></script>
<script>
jQuery(function($){
var?chosenDishSet?=?$("#chosenDishSet");
var?cks?=?$(":checkbox").change(function(){
var?me?=?$(this);
var?txt?=?me.closest("div").text();
if(me.prop("checked")){
chosenDishSet.append("<div?class='chosenDish'>"
?+?txt
?+?"<span>x</span></div>");
}else{
chosenDishSet.children(".chosenDish:contains('"?+?txt?+?"')").remove();
}
});
chosenDishSet.delegate("span:contains('x')",?"click",?function(){
var?me?=?$(this),?cd?=?me.closest(".chosenDish");
cd.remove();
var?txt?=?me.prop("previousSibling").nodeValue;
cks.closest(".dish").filter(":contains('"+txt+"')")
.find(":checkbox")
.prop("checked",false);
});
});
</script>
?
</head>
<body>
<h2>在線選菜</h2>
<fieldset>?
<legend>可選菜譜</legend>
<div?class="dish">
<label><input?type="checkbox"?/>魚香肉絲</label></div>
<div?class="dish">
<label><input?type="checkbox"?/>京醬肉絲</label></div>
<div?class="dish">
<label><input?type="checkbox"?/>紅燒茄子</label></div>
</fieldset>
<fieldset?id="chosenDishSet">
<legend>已選菜譜</legend>
</fieldset>
</body>
</html>