javascript - 将此函数添加到现有函数中

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);
}

由于性能不是这里的瓶颈，您可以通过不缓存元素来权衡性能（数十微秒）以换取可读性。将处理程序附加到所有inputs 和selects（而不是枚举集）还可以防止逻辑更改时潜在的未来错误：

$(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/