checkbox:用jquery写的

来源:互联网 发布:win7 关闭端口443 编辑:程序博客网 时间:2024/05/17 06:08

/* 
 * @author 
 * @param _this:插入的位置,比如id选择器;
 * @param checkboxshow:传入的函数,用来返回是否选中
 */


function mycheckbox(_this,checkboxshow){

$(_this).append("<div class='zhengli_input'><label><span></span></label><input value='1'/></div>")

$(_this).find(".zhengli_input").css("width","25px")
.css("margin","20px 100px")
.css("position","relative");
$(_this).find(".zhengli_input input").css("display","none")

$(_this).find(".zhengli_input label").css("cursor","pointer")
.css("position","absolute")
.css("width","20px")
.css("height","20px")
.css("top","0px")
.css("left","0px")
.css("border","1px solid #111");


$(_this).find(".zhengli_input label span").css("opacity","0")
.css("position","absolute")
.css("display","block")
.css("width","11px")
.css("height","6px")
.css("background","transparent")
.css("left","4px")
.css("top","5px")
.css("border","3px solid #111")
.css("border-top","none")
.css("border-right","none")
.css("-webkit-transform","rotate(-45deg)")
.css("-moz-transform","rotate(-45deg)")
.css("-o-transform","rotate(-45deg)")
.css("-ms-transform","rotate(-45deg)")
.css("transform","rotate(-45deg)");

$(_this).find(".zhengli_input label").hover(function(){
$(this).find("span").css("opacity","0.5");
},function(){
if($(this).next().val()=="1"){
$(this).find("span").css("opacity","0");
}  
})

$(_this).find(".zhengli_input label").click(function(){
if($(this).next().val()=="1"){
$(this).children().css("opacity","1");
$(this).next().val("2");
checkboxshow(true);

}else{
$(this).children().css("opacity","0");
$(this).next().val("1");
checkboxshow(false);
}

})

}