怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:26:421289浏览
名字
名字
名字
名字
名字
大概的意思是选中一个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;
}
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn