jQueryコードの短縮

Question

私はjQueryの初心者であり、以下のコードを繰り返し繰り返しています。これらのコードを短縮して1つのステートメントにする方法はありますか？コードが行うことは、チェックされたラジオボタンの値を取得し、特定のクラスのダイブでその値を表示することです。私はそのようなラジオボタンの複数のグループを持っています（名前は異なります）。ユーザーが選択すると、ユーザーの選択肢がdivに表示されます。コードは機能しますが、可能であればコードを短縮したいと思います。コードは冗長に見えます。ここで

コードです：

// To show default Selection 
    $(".designLayout").html($('input[name="designLayout"]:checked').val()); 
    // Change on Click 
    $('input[name="designLayout"]').on('click change', function() { 
     $(".designLayout").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".printRun").html($('input[name="printRun"]:checked').val()); 
    // Change on Click 
    $('input[name="printRun"]').on('click change', function() { 
     $(".printRun").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".printedSides").html($('input[name="printedSides"]:checked').val()); 
    // Change on Click 
    $('input[name="printedSides"]').on('click change', function() { 
     $(".printedSides").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".finishedSize").html($('input[name="finishedSize"]:checked').val()); 
    // Change on Click 
    $('input[name="finishedSize"]').on('click change', function() { 
     $(".finishedSize").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".paperWeight").html($('input[name="paperWeight"]:checked').val()); 
    // Change on Click 
    $('input[name="paperWeight"]').on('click change', function() { 
     $(".paperWeight").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".refining").html($('input[name="refining"]:checked').val()); 
    // Change on Click 
    $('input[name="refining"]').on('click change', function() { 
     $(".refining").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".processing").html($('input[name="processing"]:checked').val()); 
    // Change on Click 
    $('input[name="processing"]').on('click change', function() { 
     $(".processing").html(($(this).val())); 
    }); 

    // To show default Selection 
    $(".deliveryMethod").html($('input[name="deliveryMethod"]:checked').val()); 
    // Change on Click 
    $('input[name="deliveryMethod"]').on('click change', function() { 
     $(".deliveryMethod").html(($(this).val())); 
    }); 

Answer 1

nameとclassに同じ文字列を使用しているので、Multiple Selector (“selector1, selector2, selectorN”)を使用してchangeイベントハンドラをバインドできます。

//Use multiple selectors 
$('input[name="paperWeight"], input[name="finishedSize"]').on('change', function() { 
    if(this.checked){ //Check the element is checked 
     var name = $(this).attr('name'); //Get name attribute 
     $("." + name).html(this.value); //set the value on desired html element 
    }   
}).change(); //trigger on page load to set the default value 

Answer 2

ちょうどあなたがそのように進んで、この

function sample(name) { 
$("."+name).html($('input[name='+name+']:checked').val()); 
    // Change on Click 
    $('input[name='+name+']').on('click change', function() { 
     $("."+name).html(($(this).val())); 
    }); 
} 

sample('designLayout'); 
sample('printRun'); 

のような関数を記述します。