简单的jquery模仿单选按钮效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的jquery模仿单选按钮效果相关的知识,希望对你有一定的参考价值。

    刚开始学jquery,工作中有些css表单中的按钮美化很麻烦,所以想着用jquery来替换,复选框的jquery很容易,就是简单的样式切换效果,用toggleClass()方法即可。

    而单选框之前一直不知道怎么做,因为在单选框中选中一个,其他的都必须移除掉样式,如果2个单选框在同级中则用siblings()则可直接找到其他单选框移除掉样式即可。鉴于自己工作是循环列表模式,每个<li>里面都带有一个单选框,未发现jquery中parent()这个好用的方法,以致于纠结了半天。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏</title>
<link rel="stylesheet" href="css/default.css" type="text/css" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
	$(".level1 > a").click(function(){
		$(this).addClass("current")   //给当前元素添加"current"样式
		//移除其他列表中的radio样式,在本案例中,需要往上找3层才能找到其兄弟元素
		.parent().parent().parent().siblings().find(".ss").removeClass("current")
		return false;
	});
});
</script>
</head>
<body>
<p>第一步:初始化:</p>

<div class="box">
	<ul class="menu">
	<div>
	    <div>
	    <li class="level1">
			<a href="#none" class="ss">衬衫</a>
		</li>
		</div>
		</div>
			<div>
       <div>
	    <li class="level1">
			<a href="#none" class="ss">衬衫</a>
		</li>
		</div>
		</div>
			<div>
		<div>
	    <li class="level1">
			<a href="#none" class="ss">衬衫</a>
		</li>
		</div>
		</div>
	</ul>
</div>

</body>
</html>

效果如下:无论如何都只能一个添加样式。案例效果图到时上传。。。

技术分享

以上是关于简单的jquery模仿单选按钮效果的主要内容,如果未能解决你的问题,请参考以下文章

jquery判断单选按钮radio是否选中的方法

jquery循环遍历radio单选按钮,并设置选中状态

jQuery如何获取选中单选按钮radio的值

单选按钮以片段形式传递数据

单选按钮“选中”属性不起作用

单选按钮覆盖标签