1

这可以很好地调用 OnChange 事件：

<FORM>
<SELECT ONCHANGE="alert(this.name + ' changed: ' + this.value)">
<OPTION VALUE="1">Option 1</OPTION>
<OPTION VALUE="2">Option 2</OPTION>
<OPTION VALUE="3">Option 3</OPTION>
</SELECT>
</FORM>

但是当我使用这个造型包时：

https://web.archive.org/web/20161013011416/http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

OnChange 事件不再起作用。

<FORM>
<SELECT class="styled" ONCHANGE="alert(this.name + ' changed: ' + this.value)">
<OPTION VALUE="1">Option 1</OPTION>
<OPTION VALUE="2">Option 2</OPTION>
<OPTION VALUE="3">Option 3</OPTION>
</SELECT>
</FORM>

无论如何要使用 custom-form-elements.js 进行 OnChange 事件？

4

2 回答 2

1

答案在您链接到的页面上；）

滚动到底部，您将阅读：

onChange 和其他 JavaScript 事件

该脚本利用 JavaScript 的 onChange 和其他事件。因为这些事件只能使用一次，如果你想为一个事件添加更多的功能，你需要从我的脚本中调用它们。

：：编辑：：

Custom.clear和Custom.choose函数都是将在onChange事件中调用的函数。所以我的猜测是你修改js文件如下，看看会出现什么：

clear: function() {
    // add your code here. example:
    alert(this.name + ' changed: ' + this.value);

    inputs = document.getElementsByTagName("input");
    for(var b = 0; b < inputs.length; b++) {
        if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
        } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
        } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
        } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
        }
    }
},
choose: function() {
    // add your code here. example:
    alert(this.name + ' changed: ' + this.value);

    option = this.getElementsByTagName("option");
    for(d = 0; d < option.length; d++) {
        if(option[d].selected == true) {
            document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
        }
    }
}

注意：不要在 js 文件中编写代码块，您应该只从clearand/orchoose函数调用一次您自己的自定义函数。

于 2013-01-12T21:57:39.647 回答
0

我遇到了同样的问题......这可能不是解决这个问题的最优雅的方法，但我将单选按钮放在 span 标签内并从那里调用 onclick 事件。这件事让我疯狂了好几天......希望这会有所帮助

于 2013-01-28T20:07:38.503 回答