Question

尝试不同的方法。感谢。

Answer 1

您无需将所有onLoad处理程序收集到一个函数中。使用window.addEventListener("load", ...在页面加载时执行某些操作 - 您可以在多个位置重复此行，并且所有处理程序将运行而不是最新的处理程序。同样，请使用addEventListener("change", ...代替onChange = ...：

window.addEventListener("load", function() {                    // note here
    var likeShield = document.getElementById("likeShield");
    var chooseShield = document.getElementById("chooseShield");
    var cb3 = document.getElementById("cb3");
    var cb4 = document.getElementById("cb4");

    function checkchecks() {
        if (
        likeShield.value == "noShield" && chooseShield.value == "ely" && (cb3.checked || cb4.checked)) {
            document.getElementById("cb2").checked = true;
        }
    }
    likeShield.addEventListener("change", checkchecks);     //note here
    chooseShield.addEventListener("change", checkchecks);
    cb3.addEventListener("change", checkchecks);
    cb4.addEventListener("change", checkchecks);
})

小提琴：http://jsfiddle.net/Hz7KF/2/

由于您的javascript在加载页面本身后立即生效，因此您无需等待其他资源。现代浏览器显示domReady事件，但您不能依赖它，因为IE8不知道此事件。

jQuery（http://jquery.com/）定义ready事件。它尽可能使用domReady，并使用IE的后备。 JQuery还为Javascript中的大多数dom操作函数定义了更短的语法：

$(function(){                                //or $(document).ready(function(){
    var likeShield = $("#likeShield");
    var chooseShield = $("#chooseShield");
    var cb2 = $("#cb2"); //note that you did not cache this element
    var cb3 = $("#cb3");
    var cb4 = $("#cb4");

    function checkchecks() {
        if( likeShield.val()=="noShield" && chooseShield.val()=="ely" && (cb3.is(":checked") || cb4.is(".checked")){
            cb2.prop("checked",true)
        }
    }

    likeShield.on("change", checkchecks);
    chooseShield.on("change", checkchecks);
    cb3.on("change", checkchecks);
    cb3.on("change", checkchecks);
}

由于性能不是这里的瓶颈，因此可以通过不缓存元素来折衷性能（几十微秒）以提高可读性。将处理程序附加到所有input和select（而不是枚举集）也可以防止在逻辑更改时可能出现的未来错误：

$(function(){
    $("input, select").on("change",function(){ 
        if( $("#noShield").is(":selected") && $("#ely").is(":selected") 
            && ( $("#cb3").is(":checked") || $("#cb4").is(":checked") )
        ){
            $("#cb2").prop("checked",true); 
        }
    })
})

小提琴：http://jsfiddle.net/Hz7KF/3/

将此功能添加到现有功能中

1 个答案: