我怎样才能更有效地针对这种情况进行编程？答案

【问题标题】：How can i more effectively programming for this situation?我怎样才能更有效地针对这种情况进行编程？
【发布时间】：2017-04-18 09:49:35
【问题描述】：

我是 Jquery 的新手，我想更简短地更改这段代码有效。

这是我在下面的代码，此代码选中复选框并更改价值。无论如何有人知道这个jquery，请帮助我。

function fn_checkboxChange(){
    $("#redng_author_y").change(function(){
        if($(this).is(":checked")){
            $("#redng_author").val($(this).val());
        }
    })
    $("#redng_author_n").change(function(){
        if($(this).is(":checked")){
            $("#redng_author").val($(this).val());
        }
    })
    $("#redng_author_y").change(function(){
        if($(this).is(":checked")){
            $("#regist_author").val($(this).val());
        }
    })
    $("#updt_author_y").change(function(){
        if($(this).is(":checked")){
            $("#updt_author").val($(this).val());
        }
    })
    $("#updt_author_n").change(function(){
        if($(this).is(":checked")){
            $("#updt_author").val($(this).val());
        }
    })
    $("#delete_author_y").change(function(){
        if($(this).is(":checked")){
            $("#delete_author").val($(this).val());
        }
    })
    $("#delete_author_n").change(function(){
        if($(this).is(":checked")){
            $("#delete_author").val($(this).val());
        }
    })
}

【问题讨论】：

标签： javascript jquery helpers

【解决方案1】：

function setChangeListener(elem, targetElem){
    $(elem).change(function(){
              if($(this).is(":checked")){
              $(targetElem)).val($(this).val());
             }
           });
     }
}

然后为所有此类集合调用该函数：

function fn_checkboxChange(){
    setChangeListener( "#redng_author_y", "#redng_author");
    setChangeListener( "#redng_author_n", "#redng_author");
    setChangeListener( "#updt_author_y", "#updt_author");
    setChangeListener( "#updt_author_n", "#updt_author");
    setChangeListener( "#delete_author_y", "#delete_author");
    setChangeListener( "#delete_author_n", "#delete_author");
}

或者，如果很多复选框经常映射到同一个输入，您可以：

    function setChangeListener( targetElem, ...elems){
      elems.forEach(function(elem){

        $(elem).change(function(){
              if($(this).is(":checked")){
                $(targetElem)).val($(this).val());
             }
           });
     }); 
   }

和

function fn_checkboxChange(){
    setChangeListener(  "#redng_author", "#redng_author_y", "#redng_author_n");
    setChangeListener(  "#updt_author", "#updt_author_y","#updt_author_n");
    setChangeListener(  "#delete_author","#delete_author_y","#delete_author_n");
}

【讨论】：

【解决方案2】：

为您的复选框添加一个类和一个属性

HTML

<input type="checkbox" class="mycheckbox" data-target="someinput1" />
<input type="checkbox" class="mycheckbox" data-target="someinput2" />
<input type="checkbox" class="mycheckbox" data-target="someinput3" />
<input id="someinput1" ... />
<input id="someinput2" ... />
<input id="someinput3" ... />

JS

$(".mycheckbox").change(function(){
      if($(this).is(":checked")){
          $("#" + $(this).data("target")).val($(this).val());
      } 
 });

【讨论】：