奇数動作するJavaScript

Question

とチェックボックスの変更を検出したときに、私は次のHTMLコードを持っている：

<label class="radio"> 
    <input type="radio" name="msgTo" value="optiona" checked="checked"> 
    <i></i>Option A</label> 
<label class="radio"> 
    <input type="radio" name="msgTo" value="optionb"> 
    <i></i>Option B</label> 
<label class="radio"> 
    <input type="radio" name="msgTo" value="optionc"> 
    <i></i>Option C</label> 
<label class="radio"> 
    <input type="radio" name="msgTo" value="optiond"> 
    <i></i>Option D</label> 
<label class="radio"> 
    <input type="radio" name="msgTo" value="optione"> 
    <i></i>Option E</label> 

と私は、このコードでチェックされているオプションに応じてものをやろうとしている：

$('input[name="msgTo"]:checked').on('change', function() { 

    alert('option changed'); 

    if ($('input[name="msgTo"]:checked').val() == 'optionc') { 

     $('#outsideMsgWarning').show(); 
     $('#destEspecificos').hide(); 
     $('#locEspecificas').hide(); 

    } else if ($('input[name="msgTo"]:checked').val() == 'optiond') { 

     $('#outsideMsgWarning').show(); 
     $('#destEspecificos').hide(); 
     $('#locEspecificas').show(); 
     $('.my_select_box').trigger('chosen:updated'); 

    } else if ($('input[name="msgTo"]:checked').val() == 'optione') { 

     $('#outsideMsgWarning').show(); 
     $('#destEspecificos').hide(); 
     $('#locEspecificas').hide(); 

    } else if ($('input[name="msgTo"]:checked').val() == 'optionb') { 

     $('#outsideMsgWarning').hide(); 
     $('#destEspecificos').show(); 
     $('#locEspecificas').hide(); 
     $('.my_select_box').trigger('chosen:updated'); 

    } else { 

     $('#outsideMsgWarning').hide(); 
     $('#destEspecificos').hide(); 
     $('#locEspecificas').hide(); 
     $('.my_select_box').trigger('chosen:updated'); 

    } 

}); 

を2番目、3番目、4番目または5番目のオプションを選択すると何も起こりません（いくつかのオプションを表示/非表示にする必要があります）が、最初のもの（javascriptのELSEになります）に戻ると、警告が表示されます。アラートはテストのためのものです。

また、チェックボックスの名前に大括弧[]を追加しようとしましたが、同じ結果が得られました。

JavaScriptがすべての変更を検出しないのはなぜですか？

ありがとうございます!!!結合事象を設定します

Answer 1

あなたの最初のセレクタしか確認されているラジオボタンを探しています：

$('input[name="msgTo"]:checked').on('change', function() { 

最初のラジオボタンは1が影響されることのみを、デフォルトで事前にチェックしているので。

変更行：

$('input[name="msgTo"]').on('change', function() { 

グループ内のすべてのラジオボタンは、イベントハンドラにバインドされますように。

Answer 2

変更。あなたは、あなたがチェックし、入力を選択している:checked

$('input[name="msgTo"]').on('change', function() { 
 
if($(this).is(':checked')){ 
 
    alert('option changed'); 
 
} 
 
    if ($('input[name="msgTo"]:checked').val() == 'optionc') { 
 

 
    $('#outsideMsgWarning').show(); 
 
    $('#destEspecificos').hide(); 
 
    $('#locEspecificas').hide(); 
 

 
    } else if ($('input[name="msgTo"]:checked').val() == 'optiond') { 
 

 
    $('#outsideMsgWarning').show(); 
 
    $('#destEspecificos').hide(); 
 
    $('#locEspecificas').show(); 
 
    $('.my_select_box').trigger('chosen:updated'); 
 

 
    } else if ($('input[name="msgTo"]:checked').val() == 'optione') { 
 

 
    $('#outsideMsgWarning').show(); 
 
    $('#destEspecificos').hide(); 
 
    $('#locEspecificas').hide(); 
 

 
    } else if ($('input[name="msgTo"]:checked').val() == 'optionb') { 
 

 
    $('#outsideMsgWarning').hide(); 
 
    $('#destEspecificos').show(); 
 
    $('#locEspecificas').hide(); 
 
    $('.my_select_box').trigger('chosen:updated'); 
 

 
    } else { 
 

 
    $('#outsideMsgWarning').hide(); 
 
    $('#destEspecificos').hide(); 
 
    $('#locEspecificas').hide(); 
 
    $('.my_select_box').trigger('chosen:updated'); 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="radio"> 
 
    <input type="radio" name="msgTo" value="optiona" checked="checked"> 
 
    <i></i>Option A</label> 
 
<label class="radio"> 
 
    <input type="radio" name="msgTo" value="optionb"> 
 
    <i></i>Option B</label> 
 
<label class="radio"> 
 
    <input type="radio" name="msgTo" value="optionc"> 
 
    <i></i>Option C</label> 
 
<label class="radio"> 
 
    <input type="radio" name="msgTo" value="optiond"> 
 
    <i></i>Option D</label> 
 
<label class="radio"> 
 
    <input type="radio" name="msgTo" value="optione"> 
 
    <i></i>Option E</label>

Answer 3

を削除する必要があり、このような$('input[name="msgTo"]').on('change', function()onchangeイベント。

$('input[name="msgTo"]:checked') 

代わりに、このセレクタを試してみてください：

$('input[name="msgTo"]')