jquery求写一段关于单选框被选中时现实隐藏div的代码
如题,一个单选框组中有3个单选框。如何用jquery写当其中一个被选中时显示隐藏的div,为被选中时隐藏...
如题,一个单选框组中有3个单选框。如何用jquery写当其中一个被选中时显示隐藏的div,为被选中时隐藏
展开
2014-07-14
展开全部
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* { margin:0;padding:0;}
.boxs {width:300px;margin:30px auto; }
.check { border-bottom:2px solid #ccc;padding-bottom:10px;}
.main { width:300px; border:1px solid #ccc; margin-top:10px;padding:10px;}
.main .aaa {display:none; }
</style>
</head>
<body>
<div class="boxs">
<div class="check">
<label><input type="radio" name="sets" checked="checked" />选择题</label>
<label><input type="radio" name="sets" />填空题</label>
<label><input type="radio" name="sets" />选择题</label>
</div>
<div class="main">
<div class="aaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="aaa">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div class="aaa">cccccccccccccccccccccccccccc</div>
</div>
<script type="text/javascript" src="http://s1.56img.com/script/lib/jquery/jquery-1.4.4.min.js"></script>
<script>
$(function () {
$(".aaa").eq(0).show();
$(".check label").click(function () {
$(".aaa").hide();
var theI = $(this).index();
$(".aaa").eq(theI).show();
})
})
</script>
</div>
</body>
</html>
展开全部
$(":radio[name='xxx']").click(function(){
var index = $(":radio[name='xxx']").index($(this));
if(index == 1) //选中第2个时,div显示
$(divSelector).show();
else //当被选中的不是第2个时,div隐藏
$(divSelector).hide();
});
更多追问追答
追问
我是初学者。index = $(":radio[name='xxx']").index($(this)); 这句是什么原理,怎么就等于1或2了呢
追答
index是索引,可以理解为数组的索引,从0开始。所以1就表示第2个选项了。
$(":radio[name='xxx']")建议你看下jQuery的api,
这个表示 type="radio" name="xxx"的所有元素的集合(数组)。
$(this)是当前触发click事件的dom,index()方法就是返回$(this)在集合中的下标(索引)值。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询