javascript - この関数を既存の関数に追加する

Question

別の方法を試しています。ありがとう。

Answer 1

すべての onLoad ハンドラを 1 つの関数にまとめる必要はありません。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/