Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > How to select the entire LI content and submit it_html/css_WEB-ITnose

How to select the entire LI content and submit it_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:26:42

Original

1293 people have browsed it

Name

& lt; li & gt; & lt; img src = "images/dp_pic.jpg" width = "90" height = "90"/& gt; & lt; p & g T; name & lt;/p & gt; & lt;/li & gt;

Name

;

Name

img src="images/dp_pic.jpg" width="90" height="90" />

name

a href="#" class="btn_blu">Submit

Probably means to select an LI, the selected The background of LI changes color, and then you can submit it.

I would like to ask if it is done with radio buttons. Or use JS to control which one to choose. How to do it.
I can’t remember which website has used this effect.
Is there any expert who can help me solve this problem? Thank you. Waiting online. Thank you very much! !

Reply to discussion (solution)

<!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"/>chk1</span></label></li>			<li><label><input type="checkbox" name="chk" value="2"/><span><img src="123.jpg"/>chk2</span></label></li>			<li><label><input type="checkbox" name="chk" value="3"/><span><img src="123.jpg"/>chk3</span></label></li>			<li><label><input type="checkbox" name="chk" value="4"/><span><img src="123.jpg"/>chk4</span></label></li>			<li><label><input type="checkbox" name="chk" value="5"/><span><img src="123.jpg"/>chk5</span></label></li>					</ul>	</div>	<input type="button" value="submit" onclick="submit();"/></body></html>

Copy after login

3Q. That's the effect. I still want to ask. What should I do if I don’t want the checkbox to occupy space? Now you can see that the checkbox occupies about 5 pixels. But I see that the width is already 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"/>chk1</span></label></li>			<li><label><input type="checkbox" name="chk" value="2"/><span><img src="123.jpg"/>chk2</span></label></li>			<li><label><input type="checkbox" name="chk" value="3"/><span><img src="123.jpg"/>chk3</span></label></li>			<li><label><input type="checkbox" name="chk" value="4"/><span><img src="123.jpg"/>chk4</span></label></li>			<li><label><input type="checkbox" name="chk" value="5"/><span><img src="123.jpg"/>chk5</span></label></li>					</ul>	</div>	<input type="button" value="submit" onclick="submit();"/></body></html>

Copy after login

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

Related labels：

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

source：php.cn

Previous article：css images are not displayed_html/css_WEB-ITnose Next article：The rookie contacted Baidu, hoping for your guidance! ! _html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn