js改为jq怎么写？
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;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>
</head>
<body>
<h2>在线选菜</h2>
<fieldset>
<legend>可选菜谱</legend>
<div id="dish01" class="dish">
<input type="checkbox" onclick="toggleChoose('01')"/>鱼香肉丝
</div>
<div id="dish02" class="dish">
<input type="checkbox" onclick="toggleChoose('02')" />京酱肉丝
</div>
<div id="dish03" class="dish">
<input type="checkbox" onclick="toggleChoose('03')" />红烧茄子
</div>
</fieldset>
<fieldset id="chosenDishSet">
<legend>已选菜谱</legend>
<!--
<div id="chosenDish01" class="chosenDish">
鱼香肉丝
<span onclick="cancelChoose('01')">x</span>
</div>
-->
</fieldset>
<script>
function toggleChoose(id){
var div = document.querySelector('#dish'+id);
var checkbox = div.getElementsByTagName('input')[0];
if(checkbox.checked){ //把已选定的菜添加到“已选”
//在“已选菜谱”中添加一个div
var newDiv = document.createElement('div');
newDiv.id = 'chosenDish'+id;
newDiv.className = 'chosenDish';
newDiv.innerHTML = checkbox.nextSibling.nodeValue;
var span = document.createElement('span');
span.setAttribute('onclick', 'cancelChoose(\''+id+'\')');
span.innerHTML = 'x';
newDiv.appendChild(span);
document.querySelector('#chosenDishSet').appendChild(newDiv);
}else{
cancelChoose(id);
}
}
/*根据菜的id号取消该菜的选择*/
function cancelChoose(id){
//从已选菜谱中删除目标菜谱
var div = document.querySelector('#chosenDish'+id);
div.parentNode.removeChild(div);
//从所有菜谱中将取消选择的菜谱的勾选取消
//....checked = false
}
</script>+
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;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>
</head>
<body>
<h2>在线选菜</h2>
<fieldset>
<legend>可选菜谱</legend>
<div id="dish01" class="dish">
<input type="checkbox" onclick="toggleChoose('01')"/>鱼香肉丝
</div>
<div id="dish02" class="dish">
<input type="checkbox" onclick="toggleChoose('02')" />京酱肉丝
</div>
<div id="dish03" class="dish">
<input type="checkbox" onclick="toggleChoose('03')" />红烧茄子
</div>
</fieldset>
<fieldset id="chosenDishSet">
<legend>已选菜谱</legend>
<!--
<div id="chosenDish01" class="chosenDish">
鱼香肉丝
<span onclick="cancelChoose('01')">x</span>
</div>
-->
</fieldset>
<script>
function toggleChoose(id){
var div = document.querySelector('#dish'+id);
var checkbox = div.getElementsByTagName('input')[0];
if(checkbox.checked){ //把已选定的菜添加到“已选”
//在“已选菜谱”中添加一个div
var newDiv = document.createElement('div');
newDiv.id = 'chosenDish'+id;
newDiv.className = 'chosenDish';
newDiv.innerHTML = checkbox.nextSibling.nodeValue;
var span = document.createElement('span');
span.setAttribute('onclick', 'cancelChoose(\''+id+'\')');
span.innerHTML = 'x';
newDiv.appendChild(span);
document.querySelector('#chosenDishSet').appendChild(newDiv);
}else{
cancelChoose(id);
}
}
/*根据菜的id号取消该菜的选择*/
function cancelChoose(id){
//从已选菜谱中删除目标菜谱
var div = document.querySelector('#chosenDish'+id);
div.parentNode.removeChild(div);
//从所有菜谱中将取消选择的菜谱的勾选取消
//....checked = false
}
</script>+
</body>
</html> 展开
展开全部
<!DOCTYPE html>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
