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
- WBOYOriginal
- 2016-06-24 12:26:421289browse
25edfb22a4f469ecb59f1190150159c6d69f7d3a89bf106c3b02f46bbf3c6927e388a4556c0f65e1904146cc1a846beeName94b3e26ee717c64999d7867364b1b4a3bed06894275b65c1ab86501b08a632eb
& 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;
25edfb22a4f469ecb59f1190150159c6d69f7d3a89bf106c3b02f46bbf3c6927e388a4556c0f65e1904146cc1a846beeName94b3e26ee717c64999d7867364b1b4a3bed06894275b65c1ab86501b08a632eb
;d69f7d3a89bf106c3b02f46bbf3c6927e388a4556c0f65e1904146cc1a846beeName94b3e26ee717c64999d7867364b1b4a3bed06894275b65c1ab86501b08a632eb
img src="images/dp_pic.jpg" width="90" height="90" />e388a4556c0f65e1904146cc1a846beename94b3e26ee717c64999d7867364b1b4a3bed06894275b65c1ab86501b08a632eb
a href="#" class="btn_blu">45a2772a6b6107b401db3c9b82c049c2Submit54bdf357c58b8a65c66d7c19c8e4d1145db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68
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> 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> 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.
input[type=checkbox] {
visibility: hidden;
width: 0;
border: 0;
margin: 0;
}