Heim >Web-Frontend >HTML-Tutorial >怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose
怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:26:421288Durchsuche
名字
名字
名字
名字
名字
大概的意思是选中一个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;
}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css图片不显示_html/css_WEB-ITnoseNächster Artikel：菜鸟联系百度，希望大家指导！！_html/css_WEB-ITnose