Javascript 具有多个图像的自定义复选框

我正在尝试使用图像而不是文本框。我在谷歌上找到了这个网站：我真的很喜欢它的样子。但由于我需要的复选框是在facebook和twiter中“共享”，所以我需要在复选框上显示两个不同的图像。我可以通过首先修改css来做到这一点：

.checkboxfb {
width: 23px; height: 23px; padding: 0 5px 0 0;
background: url(images/files/ico_facebook_mult_sml2.png) no-repeat;
display: block; clear: left; float: left;}

.checkboxtw {
width: 23px; height: 22px; padding: 0 5px 0 0;
background: url(images/files/twitter_logo_mult_sml.png) no-repeat;
display: block; clear: left; float: left;}

我在html中区分了各个类：

<form method="post" action=".">
<input type="checkbox" name="fb" class="styledfb" />FB <br /><br />
<input type="checkbox" name="tw" class="styledtw" />TW </form>

FB


TW

并复制脚本FBcheckbox.js：

document.write('<style type="text/css">input.styled**fb** { display: none; } select.styled**fb** { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
inita: function() {
    var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
    for(a = 0; a < inputs.length; a++) {
        if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styledfb") {
            span[a] = document.createElement("span");
            span[a].className = inputs[a].type + "**fb**";

if (window.addEventListener) {
    window.addEventListener("load",Customa.inita,false);
} else if (window.attachEvent) {
    window.attachEvent("onload",Customa.inita);
}

if (window.addEventListener) {
    window.addEventListener("load",Customb.initb,false);
} else if (window.attachEvent) {
    window.attachEvent("onload",Customb.initb);
}

document.write（'input.styled**fb**{display:none；}select.styled**fb**{position:relative；width:'+selectWidth+'px；不透明度：0；过滤器：alpha（不透明度=0）；z-index:5；}.disabled{opacity:0.5；过滤器：alpha（不透明度=50）；}）；
变量自定义={
inita:function（）{
var inputs=document.getElementsByTagName（“输入”），span=Array（），textnode，option，active；
对于（a=0；a

当然，另一个js文件将使用“tw”而不是“fb”，它被称为TWcheckbox.js。 （你可以在这里看到整个js:and）

在标题中，我调用两个文件：

---

现在有趣的是，一次只有一个可以工作。在头中调用它们时，以秒为准。测试文件是

两个脚本文件都在分配

自定义

变量的值。当加载两个文件中的第二个文件时，它会覆盖先前对

自定义

的分配。即使如果有单独的

inita

和

initb

函数，则在加载第二个JS文件时，将覆盖整个

Custom

对象

因此，如果首先加载FBcheckbox.js，

inita

在对象中定义，但是当TWcheckbox.js加载并重新分配

Custom

的内容而不是添加到其中时，

inita

在页面加载事件触发时不再存在，因为TWcheckbox.js版本的

Custom

不包括

inita

由于JS文件中的

自定义

对象中唯一不同的函数似乎是

inita

和

initb

，因此我建议将它们一起分配到on文件中。例如：

var Custom = {
  inita: function() {
    // ...your code here...
  },
  initb: function() {
    // ...your code here...
  },
  pushed: function() {
    // ...your code here...
  },
  // etc...
};

如果你想让它们分开，你可以添加代码，在赋值之前检查对象是否存在，如果对象存在，则添加到对象中，而不是重新赋值整个对象。但是，我认为将上述两者结合起来可以减少代码中的重复

if (typeof(Custom)!="undefined" && !Custom.inita) {
  Custom.inita = function() { /* ...your code here... */ }
} else if (typeof(Custom)=="undefined") {
  var Custom = {
    // ...your code here...
  };
};

使用

window.onload

分配两个init函数会出现相同的问题。最近加载的JS文件将覆盖以前分配的window.onload值，而不是添加到该值中。要分配多个函数来触发页面的onload，应使用如下语法：

在FBcheckbox.js中：

document.write('<style type="text/css">input.styled**fb** { display: none; } select.styled**fb** { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
inita: function() {
    var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
    for(a = 0; a < inputs.length; a++) {
        if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styledfb") {
            span[a] = document.createElement("span");
            span[a].className = inputs[a].type + "**fb**";

if (window.addEventListener) {
    window.addEventListener("load",Customa.inita,false);
} else if (window.attachEvent) {
    window.attachEvent("onload",Customa.inita);
}

if (window.addEventListener) {
    window.addEventListener("load",Customb.initb,false);
} else if (window.attachEvent) {
    window.attachEvent("onload",Customb.initb);
}

在TWcheckbox.js中：

document.write('<style type="text/css">input.styled**fb** { display: none; } select.styled**fb** { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
inita: function() {
    var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
    for(a = 0; a < inputs.length; a++) {
        if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styledfb") {
            span[a] = document.createElement("span");
            span[a].className = inputs[a].type + "**fb**";

if (window.addEventListener) {
    window.addEventListener("load",Customa.inita,false);
} else if (window.attachEvent) {
    window.attachEvent("onload",Customa.inita);
}

if (window.addEventListener) {
    window.addEventListener("load",Customb.initb,false);
} else if (window.attachEvent) {
    window.attachEvent("onload",Customb.initb);
}

---

谢谢你的时间。但我仍然有一些问题：“window.onload=Custom.init；”的语法是什么？因此它同时触发inita和initb？我正在尝试将Customa和Customb作为变量，结果相同：只显示第二个变量！嘿@cbarg，很抱歉，我最初错过了这一部分。分配window.onload两次会产生sam问题-最近运行的window.onload赋值将覆盖以前的值。解决方法是使用如下语法：

if（window.addEventListener）{window.addEventListener（“load”，Customa.inita，false）；}否则if（window.attachEvent）{window.attachEvent（“onload”，Customa.inita）；}

-对于第二个JS文件，您需要将

Customa.inita

切换到

Customb.initb

。我更新了原始答案，以更清晰的格式包含有关window.onload问题的更多信息。