html5复选框选中显示内容,jQuery实现checkbox选中时显示内容，没选中时隐藏内容...

checkbox

.show{ width:300px; height:50px;}

.box{ width:300px; float:left; height:50px;}

.content{ line-height:30px; float:left; width:200px; display:none;}

.input{ float:left; width:100px;}

1

11111111111

2

222222222222

3

3333333333333333

$(function(){

var indexs=0;

$(".check").click(function(){

if($(this).attr("checked")){    //如果当前的复选框是选中状态

indexs=$(".check").index($(this));    //复选框的当前索引值

$(".content").eq(indexs).show();    //与复选框索引值相同的content显示

}

else{    //如果当前的复选框没有被选中

indexs=$(".check").index($(this));

$(".content").eq(indexs).hide();    //与复选框索引值相同的content隐藏

}

});

});

attr() 方法设置或返回被选元素的属性值。

index() 方法返回指定元素相对于其他指定元素的 index 位置。

eq() 方法将匹配元素集缩减值指定 index 上的一个。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/4620.html

微信打赏

支付宝打赏

感谢您对作者Joy的打赏，我们会更加努力！    如果您想成为作者，请点我