JQUERY 怎么做这个 checkbox效果

发布网友 发布时间：2022-04-22 17:29

我来回答

共2个回答

热心网友 时间：2022-04-22 18:59

纯手写代码 非copy
下面有测试连接 在我自己的服务器上...有时候服务器会出问题.....
演示地址:http://help.kansea.com//jQuery/295681853.html

程序代码:
样式根据自己需要自己调
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var a=101;
var b=405;
var i=0;
jQuery(document).ready(function() {
jQuery(":checkbox").each(function(){
i++;
var c=a*i+b;
var ostyle = {
input:{},
parent:{}
};
jQuery(this).click(function(){

jQuery('.compare_tip').html(c);//显示变量c
//默认样式
ostyle.input = {
"display":"none"
};
ostyle.parent = {
"background":"none"
};

if(jQuery(this).is(":checked")){//被选中
//被选中的样式
ostyle.input = {
"display":"block",
"position":"absolute",
"top":c+"px",//变量c 浮动top变动,来定位checkbox提示层的显示
"left":"125px"
};
ostyle.parent = {
"background-color":"gray"
};
}
jQuery('.compare_tip').css(ostyle.input);
jQuery(this).parent().parent().css(ostyle.parent);
});
});
});
</script>
<div><label><input type="checkbox" />111</label></div>
<div><label><input type="checkbox" />222</label></div>
<div><label><input type="checkbox" />333</label></div>
<div><label><input type="checkbox" />444</label></div>
<div><label><input type="checkbox" />555</label></div>
样式根据自己需要自己调
<div class="compare_tip" style="background:red;width:100px;">tips</div>

热心网友 时间：2022-04-22 20:17

很复杂。