Question

我正在尝试使用onclick功能来设置我的复选框样式。我找到了一个非常好的样式代码，但它禁用了onClick功能。它基本上隐藏了实际的复选框并对标签进行了样式化。价值仍然存在，但javascript将无法正常工作。有没有办法让它发挥作用？

CSS

input[type=checkbox] {
margin:10px;
position: absolute;
z-index: -1;
}
input[type=checkbox] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
margin-bottom: 0;
font-size: 18px;
color:#8C8C8C;
font-family:"Goudy Old Style";
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}

input[type=checkbox]:checked + label {
   background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    background-color:#e0e0e0;
    color:#FBFBFB;
}

HTML

<input type="checkbox" id="checkbox1" name="type_of_contact" value="Fax" >
   <label for="checkbox1">Fax</label>
<input type="checkbox" id="checkbox2" name="type_of_contact"value="Mail" onclick="myMail()">
   <label for="checkbox2">Mail</label>

的Javascript

function myMail() {
        if (document.getElementById('mail').checked) {
        document.getElementById('entermail').style.display = "block";
    } else {
        document.getElementById('entermail').style.display = "none";
    }
}

Answer 1

您的CSS将z-index：-1添加到标签下的复选框和发送复选框。将onClick事件添加到Label而不是Checkbox。

Answer 2

html不匹配。当我纠正ids时，它就像一个魅力。

Answer 3

在全局窗口对象上添加您的函数。

window.myMail = function() {
    alert('test');
};

演示：http://jsfiddle.net/Gntdg/

复选框标签样式和javascript onClick

3 个答案: