複数のif-elseブロックの上書きを避ける方法は？

Question

[電子メール]チェックボックスをクリックすると、別のフィールドが表示され、一部のフィールドが表示されなくなります。私はこれを行うための単純なif-elseロジックで関数を書いた。複数のif-elseロジックに対して、あるブロックは別のブロックを上書きします。私はリターンを使用していますが、まだ動作していません。ここに私のコードです。

function checkCheckbox() { 
     if ($('#irregular').is(":checked")) { 
      $('#daysOfInactivity').show(); 
      $("#targetPointDiv").hide(); 
      $("#targetTransactionDiv").hide(); 
      $("#fixedTimeDiv").hide(); 
      $("#isNumOfTrans").hide(); 
      return; 
     } else { 
      $('#daysOfInactivity').hide(); 
      $("#targetPointDiv").show(); 
      $("#targetTransactionDiv").show(); 
      $("#fixedTimeDiv").show(); 
      $("#isNumOfTrans").show(); 
      return; 
     } 
     if ($('#isNumOfTrans').is(":checked")) { 
      $('#numOfTrans').show(); 
      $("#targetPointDiv").hide(); 
      $("#targetTransactionDiv").hide(); 
      $("#fixedTimeDiv").hide(); 
      return; 
     } else { 
      $('#numOfTrans').hide(); 
      $("#targetPointDiv").hide(); 
      $("#targetTransactionDiv").hide(); 
      $("#fixedTimeDiv").hide(); 
      return; 
     } 

}

Answer 1

@Sayed Mahmud Raihanこのようなことを試すことができます。

$(document).ready(function(){ 
    $('#irregular').change(function(){ 
     if ($(this).is(":checked")) { 
      $('#daysOfInactivity').show(); 
      $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').hide(); 

     } else { 
      $('#daysOfInactivity').hide(); 
      $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').show(); 
     } 
    }); 

    $('#isNumOfTrans').change(function(){ 
     if ($(this).is(":checked")) { 
      $('#numOfTrans').show(); 
      $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide(); 
     } else 
      $('#numOfTrans, #targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide(); 

    }); 
} 

またはこの中

function checkCheckBox(){ 
    $('#irregular').change(function(){ 
     if ($(this).is(":checked")) { 
      $('#daysOfInactivity').show(); 
      $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').hide(); 

     } else { 
      $('#daysOfInactivity').hide(); 
      $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans').show(); 
     } 
    }); 

    $('#isNumOfTrans').change(function(){ 
     if ($(this).is(":checked")) { 
      $('#numOfTrans').show(); 
      $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide(); 
     } else 
      $('#numOfTrans, #targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide(); 

    }); 
} 
$(document).ready(checkCheckBox); 

それとも、これは私は、これはリターンを削除し、要素の可視性を切り替えるにはあなたを助けると仮定

function checkCheckBox(){ 
    $('#irregular').change(function(){ 
      $('#daysOfInactivity')[$(this).is(":checked")?'show':'hide']; 
      $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv, #isNumOfTrans')[!($(this).is(":checked"))?'show':'hide']; 
    }); 

    $('#isNumOfTrans').change(function(){ 
      $('#numOfTrans')[(this).is(":checked")?'show':'hide']; 
      $('#targetPointDiv, #targetTransactionDiv, #fixedTimeDiv').hide(); 
    }); 
} 
$(document).ready(checkCheckBox); 

Answer 2

以下のコードセグメントが実行されることはありません：

if ($('#isNumOfTrans').is(":checked")) { 
     $('#numOfTrans').show(); 
     $("#targetPointDiv").hide(); 
     $("#targetTransactionDiv").hide(); 
     $("#fixedTimeDiv").hide(); 
     return; 
    } else { 
     $('#numOfTrans').hide(); 
     $("#targetPointDiv").hide(); 
     $("#targetTransactionDiv").hide(); 
     $("#fixedTimeDiv").hide(); 
     return; 
    } 

最初のためのブロックがreturnステートメントを持っており、コードが上記ブロックに到達させることはないであろう場合です。これは異常行動を引き起こす可能性が最も高いです！重複する条件があるので、論理をifブロックから分離することを検討してください。

Answer 3

function checkCheckbox(){ 
$('#numOfTrans').hide(); 
$('#daysOfInactivity').hide(); 
$("#targetPointDiv").hide(); 
$("#targetTransactionDiv").hide(); 
$("#fixedTimeDiv").hide(); 
$("#isNumOfTrans").hide(); 

if ($('#irregular').is(":checked")) { 
    $('#daysOfInactivity').show(); 
} else { 

    $("#targetPointDiv").show(); 
    $("#targetTransactionDiv").show(); 
    $("#fixedTimeDiv").show(); 
    $("#isNumOfTrans").show(); 
} 
if ($('#isNumOfTrans').is(":checked")) { 
    $('#numOfTrans').show(); 
} 
} 

をway-をway- 。 @APLアプローチを強くお勧めします。