HTMLとJavaScriptでフォームから値をアクセスするときに未定義の返信

Question

undefinedのフォームに問題があります。フォームの値を動的に取得しようとしています。しかし、私のalert()の間に2回発射してundefinedを返すようです。この問題を解決する方法がわかりません。ページに別のフォームを追加するのが最善でしょうか？

---

HTML

<div class="container"> 
<form id="sasTokenOptions"> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <div class="card"> 
       <div class="card-title">SAS Token Duration</div> 
       <p></p> 
       <p>Please select a the duration of the SAS Token.</p> 
      </div> 

      <div class="container"> 
       <div class="radio" id=""> 
        <label><input type="radio" name="optradio" value="1" />1 hour</label> 
       </div> 
       <div class="radio"> 
        <label><input type="radio" name="optradio" value="24" />24 hours</label> 
       </div> 
       <div class="radio"> 
        <label><input type="radio" name="optradio" value="720" />30 days</label> 
       </div> 
      </div> 
     </div> 

     <div class="col-xs-6"> 

      <div class="card"> 
       <div class="card-title">SAS Token Access Permission</div> 
       <p></p> 
       <p>Please select the SAS Token's permission.</p> 
      </div> 
      <div class="container"> 
       <div class="checkbox"> 
        <label><input type="checkbox" name="optcheck" value="Read">Read</label> 
       </div> 
       <div class="checkbox"> 
        <label><input type="checkbox" name="optcheck" value="Write">Write</label> 
       </div> 
       <div class="checkbox"> 
        <label><input type="checkbox" name="optcheck" value="List">List</label> 
       </div> 
       <div class="checkbox"> 
        <label><input type="checkbox" name="optcheck" value="Delete">Delete</label> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-6 col-sm-4"><button type="button" class="btn btn-primary btn-sm" id="submit">Submit</button></div> 
    </div> 
</form> 

はJavaScript

$("#sasTokenOptions input").on('change', function() { 
    alert($('input[name=optradio]:checked', '#sasTokenOptions').val()); 
}) 

$("#sasTokenOptions input").on('change', function() { 
    alert($('input[name=optcheck]:checked', "#sasTokenOptions").val()); 
}) 

Answer 1

あなたは、入力要素が変更されるたびに発射変更ハンドラに2を持っています。 1つは無線入力をチェックし、1つはチェックボックス入力をチェックします。

両方のタイプでオプションが選択されていない場合、アラートの1つがundefinedを返します。最初にチェックボックスをクリックしてみてください。undefinedはラジオが選択されていないので、チェックボックスの値が表示されません。

することがあり、各入力タイプの変更イベントに独立しており、などの複数のチェックボックスを選択することができ、この

$('input[name=optradio]').on('change', function() { 
    alert($('input[name=optradio]:checked', '#sasTokenOptions').val()); 
}); 

$('input[name=optcheck]').on('change', function() { 
    $('input[name=optcheck]:checked', "#sasTokenOptions").each(function() { 
     alert($(this).val()); 
    }) 
}); 

を試してみて、それが確認され、それぞれの値を警告します。