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

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:26 PM

名字

提交

大概的意思是选中一个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="/static/imghw/default1.png"  data-src="123.jpg"  class="lazy"  / alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk1</span></label></li>			<li><label><input type="checkbox" name="chk" value="2"/><span><img  src="/static/imghw/default1.png"  data-src="123.jpg"  class="lazy"  / alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk2</span></label></li>			<li><label><input type="checkbox" name="chk" value="3"/><span><img  src="/static/imghw/default1.png"  data-src="123.jpg"  class="lazy"  / alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk3</span></label></li>			<li><label><input type="checkbox" name="chk" value="4"/><span><img  src="/static/imghw/default1.png"  data-src="123.jpg"  class="lazy"  / alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk4</span></label></li>			<li><label><input type="checkbox" name="chk" value="5"/><span><img  src="/static/imghw/default1.png"  data-src="123.jpg"  class="lazy"  / 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="/static/imghw/default1.png"  data-src="123.jpg"  class="lazy"  / alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk1</span></label></li>			<li><label><input type="checkbox" name="chk" value="2"/><span><img  src="/static/imghw/default1.png"  data-src="123.jpg"  class="lazy"  / alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk2</span></label></li>			<li><label><input type="checkbox" name="chk" value="3"/><span><img  src="/static/imghw/default1.png"  data-src="123.jpg"  class="lazy"  / alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk3</span></label></li>			<li><label><input type="checkbox" name="chk" value="4"/><span><img  src="/static/imghw/default1.png"  data-src="123.jpg"  class="lazy"  / alt="怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose" >chk4</span></label></li>			<li><label><input type="checkbox" name="chk" value="5"/><span><img  src="/static/imghw/default1.png"  data-src="123.jpg"  class="lazy"  / 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;
}

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7566

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

105

显示更多

Related knowledge

＆gt; gt;的目的是什么元素？ Mar 21, 2025 pm 12:34 PM

本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

＆lt; datalist＆gt;的目的是什么。元素？ Mar 21, 2025 pm 12:33 PM

本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159

＆lt; meter＆gt;的目的是什么。元素？ Mar 21, 2025 pm 12:35 PM

本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前

视口元标签是什么？为什么对响应式设计很重要？ Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。

＆lt; iframe＆gt;的目的是什么。标签？使用时的安全考虑是什么？ Mar 20, 2025 pm 06:05 PM

本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles

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

回复讨论(解决方案)

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题