首页 >web前端 >html教程 >怎么样选中整个LI的内容然后提交_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 12:26:421296浏览


                    

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

    名字


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

    名字


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

    名字


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

    名字


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

    名字



  •                    
    提交


    大概的意思是选中一个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