怎么样选中整个LI的内容然后提交_html/css

怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:26:42

原创

1451人浏览过

名字

立即学习“前端免费学习笔记（深入）”；

Trae国内版

国内首款AI原生IDE，专为中国开发者打造

815

查看详情

名字

立即学习“前端免费学习笔记（深入）”；

名字

立即学习“前端免费学习笔记（深入）”；

名字

立即学习“前端免费学习笔记（深入）”；

名字

立即学习“前端免费学习笔记（深入）”；

提交

大概的意思是选中一个LI，被选中的LI的背景变个色，然后可以提交。

我想问下是用单选按钮做吗。还是用JS去控制选择哪个啊。怎么做呢。
一时也想不起来哪个网站用过这个效果了。
有高手帮忙解决下吗。谢谢了。在线等。多谢多谢！！

回复讨论(解决方案)

<!doctype html><html><head><meta charset="utf-8"><title></title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><style>	ul,li{		padding:0;		margin:0;		list-style:none;	}		li{		width:100px;		border:1px solid;		background:#FFF;	}	input[type=checkbox]{		visibility:hidden;		width:0;	}	span{		width:100%;	}	label{		display:block;	}	.selected{		background:#F60;	}	img{		width:20px;		height:20px;	}</style><script>	$(function(){		$("input").change(function(){			var _this = $(this),				li = _this.closest("li");			if(_this.is(":checked")){				li.addClass("selected");			}else {				li.removeClass("selected");			}		});	});	function submit(){		var chkVal = [];		$("input[type=checkbox]:checked").each(function(){			chkVal.push(this.value);		});			alert(chkVal);	}</script></head><body>	<div>		<ul>			<li><label><input type="checkbox" name="chk" value="1"/><span><img  src="123.jpg"/ alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk1</span></label></li>			<li><label><input type="checkbox" name="chk" value="2"/><span><img  src="123.jpg"/ alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk2</span></label></li>			<li><label><input type="checkbox" name="chk" value="3"/><span><img  src="123.jpg"/ alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk3</span></label></li>			<li><label><input type="checkbox" name="chk" value="4"/><span><img  src="123.jpg"/ alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk4</span></label></li>			<li><label><input type="checkbox" name="chk" value="5"/><span><img  src="123.jpg"/ alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk5</span></label></li>					</ul>	</div>	<input type="button" value="submit" onclick="submit();"/></body></html>

登录后复制

3Q。就是这个效果。还想问下。我不想让checkbox占位怎么办呢。现在看checkbox占了大概5像素的位置。但是我看宽已经是0了。

<!doctype html><html><head><meta charset="utf-8"><title></title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><style>	ul,li{		padding:0;		margin:0;		list-style:none;	}		li{		width:100px;		border:1px solid;		background:#FFF;	}	input[type=checkbox]{		visibility:hidden;		width:0;	}	span{		width:100%;	}	label{		display:block;	}	.selected{		background:#F60;	}	img{		width:20px;		height:20px;	}</style><script>	$(function(){		$("input").change(function(){			var _this = $(this),				li = _this.closest("li");			if(_this.is(":checked")){				li.addClass("selected");			}else {				li.removeClass("selected");			}		});	});	function submit(){		var chkVal = [];		$("input[type=checkbox]:checked").each(function(){			chkVal.push(this.value);		});			alert(chkVal);	}</script></head><body>	<div>		<ul>			<li><label><input type="checkbox" name="chk" value="1"/><span><img  src="123.jpg"/ alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk1</span></label></li>			<li><label><input type="checkbox" name="chk" value="2"/><span><img  src="123.jpg"/ alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk2</span></label></li>			<li><label><input type="checkbox" name="chk" value="3"/><span><img  src="123.jpg"/ alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk3</span></label></li>			<li><label><input type="checkbox" name="chk" value="4"/><span><img  src="123.jpg"/ alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk4</span></label></li>			<li><label><input type="checkbox" name="chk" value="5"/><span><img  src="123.jpg"/ alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk5</span></label></li>					</ul>	</div>	<input type="button" value="submit" onclick="submit();"/></body></html>

登录后复制

3Q。就是这个效果。还想问下。我不想让checkbox占位怎么办呢。现在看checkbox占了大概5像素的位置。但是我看宽已经是0了。

input[type=checkbox] {
visibility: hidden;
width: 0;
border: 0;
margin: 0;
}