checkbox美化;给div加上checked属性

DIV的背景图修改

$("#isOpenmibao").css("backgroundImage", " url('../images/checkbox_02.png')")

一个是勾选的状态,一个是未勾选的状态,   但是这个不是用 checkbox 来制作的,而是用 DIV配合背景图来制作的

 

那么我们 提交数据的时候,怎么判断 是勾选还是没勾选呢?  我们给div加上一个 checked属性

<div onclick="myCheckbox('IsOnlyTeacher',this);" id="IsOnlyTeacher" class="checkbox" style="background-image: url(&quot;../images/checkbox_02.png&quot;);"> </div>

我们来看看这个 myCheckbox 方法  注意里面有一个  o.checked  这就是人为的给div层 加了一个 checked属性

//设置单选框处理
function myCheckbox(obj, thisobj) {
    var o = document.getElementById(obj);

    //解决复选框需要连续点击两次才生效的bug   by yxx,此处做特殊处理
    if (thisobj.style.backgroundImage == 'url("../images/checkbox_02.png")') {
        thisobj.style.backgroundImage = "url(../images/checkbox_01.png)";
        o.checked = false;
    }
    else {
        if (o.checked) {
            thisobj.style.backgroundImage = "url(../images/checkbox_01.png)";
            o.checked = false;
        }
        else {
            thisobj.style.backgroundImage = "url(../images/checkbox_02.png)";
            o.checked = true;
        }
    }
}

 

假如我们点击了任何一个的div,就会触发上面的函数,那么对应的div就会增加checked属性.  下面就是在我们的提交的方法里面  直接对DIV判断有没有checked  即可

var isonlyteacher = $("#IsOnlyTeacher").attr("checked");

如果我们不是对div点击 ,还是直接显示后提交,这里就需要我们先人为的给div加一个checked属性了  ,这个自己搞一下即可