使單選按鈕由用戶

Question

必需選擇我有提供一個數值範圍5單選按鈕：

 <input type="radio" name="bookperiod" id="bookperiod" value="1"/>1<br> 
     <input type="radio" name="bookperiod" id="bookperiod" value="2"/>2<br> 
     <input type="radio" name="bookperiod" id="bookperiod" value="3"/>3<br>  
     <input type="radio" name="bookperiod" id="bookperiod" value="4"/>4<br>  
     <input type="radio" name="bookperiod" id="bookperiod" value="5"/>5<br> 

我想它，以確保用戶選擇他們，是因爲目前的用戶不能選擇一個該表格仍然會提交。雖然我可以讓他們中的一個「檢查」，但這可能意味着用戶仍然可以提交而無需實際做出選擇。

如何確保在用戶點擊提交時用戶已經明確選擇了他們的一項協議。

Answer 1

這是一個典型的用例的the required attribute。

即使禁用了JavaScript，現代瀏覽器也不會讓您提交表單，如果沒有選中單選按鈕。

<form action=""> 
    <input type="radio" name="bookperiod" id="bookperiod" value="1" required />1<br /> 
    <input type="radio" name="bookperiod" id="bookperiod" value="2" required />2<br /> 
    <input type="radio" name="bookperiod" id="bookperiod" value="3" required />3<br />  
    <input type="radio" name="bookperiod" id="bookperiod" value="4" required />4<br />  
    <input type="radio" name="bookperiod" id="bookperiod" value="5" required />5<br /> 

    <button type="submit">Submit</button> 
</form> 

http://jsfiddle.net/feeela/5cJj8/

所需的單選按鈕一個簡單的JS驗證：

document.forms[0].addEventListener('submit', function(event) { 
    event.preventDefault(); 

    var form = event.target, 
     radioHasCheckedButton = form.querySelector('input[required][name="bookperiod"]:checked'); 

    if(!radioHasCheckedButton) { 
     // Error handling here – no radio button was checked 
     console.log('Some required fields are missing.'); 
    } 
    else { 
     // Everything is fine – finally submit the form 
     form.submit(); 
    } 

}, false); 

Answer 2

你可以預先選擇一個用戶，那麼用戶將被迫選擇其他選項，或者接受第一

<input type="radio" checked name="bookperiod" id="bookperiod" value="1"/>1<br> 
    <input type="radio" name="bookperiod" id="bookperiod" value="2"/>2<br> 
    <input type="radio" name="bookperiod" id="bookperiod" value="3"/>3<br>  
    <input type="radio" name="bookperiod" id="bookperiod" value="4"/>4<br>  
    <input type="radio" name="bookperiod" id="bookperiod" value="5"/>5<br> 

Answer 3

我覺得所有這些問題的答案都勉強過得去。首先：你不能有多個具有相同ID的元素。將其更改爲一個類或每個唯一標籤！

您不能跳過PHP檢查。這必須始終完成。請閱讀與服務器端和客戶端相關的內容，特別是在驗證時。我不會在這裏討論它。

添加客戶端（Javascript）檢查僅供用戶使用。這允許用戶在點擊提交按鈕之前知道表單不完整並且不得不在服務器上等待。

這可以在幾個方面，更要做......

1. 添加額外的單選按鈕能見度或顯示關閉與CSS。這將被默認檢查。使用JavaScript，你可以看到這是否仍然是選中的單選按鈕（意思是用戶沒有選擇其中一個可見的按鈕）=>顯示錯誤

2. 迭代每個單選按鈕並確保其中一個被選中（for循環內的標準if）未經測試的jqyery代碼。

   function validateBookPeriod() { 
       var bookperiodSelected = false; 
       $('.bookperiod').each(function(){ 
        if($this.attr('checked') == checked) bookperiodSelected=true;     
       }); 
   
       if (bookperiodSelected == false) 
        alert('Please select a book period!'); 
   } 
   validateBookPeriod();