使用HTML和JavaScript從窗體訪問值時返回undefined

Question

我的表單顯示undefined時出現問題。我正在嘗試動態獲取表單的值。然而在我的alert()它似乎兩次觸發並返回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個。一個檢查無線電輸入，一個檢查複選框輸入。

如果兩種類型都沒有檢查到選項，則其中一個警報將返回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()); 
    }) 
}); 

有獨立的上改變事件對於每個輸入的類型和作爲多個複選框可以被選擇，它提醒檢查每個值。