如何添加OnChange事件以選擇使用custom-form-elements.js設置樣式的元素？

Question

這可以很好地調用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事件？

Answer 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文件中編寫代碼塊，而只需從clear和/或choose函數調用一次您自己的自定義函數。

Answer 2

我遇到了同樣的問題...。這可能不是解決此問題的最優雅的方法，但我將單選按鈕放在了span標簽中，並從那里調用了onclick事件。 這東西讓我瘋狂了好幾天...希望這會有所幫助