選擇多個選項的單選按鈕

好吧，我正在爲我的計算機課程開發一個項目，我們正在使用窗體中的單選按鈕。部分要求是確保當提交按鈕被點擊時，它不會留空，並且只有一個單選按鈕被點擊。選擇多個選項的單選按鈕

每當我使用單選按鈕，它只允許你點擊一個，所以我被這個需求所困惑。我甚至去過W3學校HTML Forms Input Types，並確認一次只能選擇一個收音機。

聯繫我的TA後，雖然他給我發送了下面的代碼，允許選擇多個單選按鈕。任何澄清爲什麼下面的代碼允許選擇多個單選按鈕，並且如果我對單選按鈕的知識是正確的，那將是美妙的。提前致謝。

<html> 
 
    <head> 
 
    
 
    <META http-equiv="Content-Type" content="text/html; charset=utf-8"></head> 
 
    
 
    <body> 
 
    <div> 
 

 
    <form target="_blank" onsubmit="try {return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);} catch (e) {return false;}"> 
 
    <input type="radio"> one<br> 
 
    <input type="radio"> two<br> 
 
    <input type="radio"> three<br> 
 

 
    </form> 
 
    </div> 
 
    </body> 
 
    </html>

JSFiddle

來源

2016-02-16 nviens

既然你瞭解HTML，儘量避免W3Schools的。 – j08691

我對此並不陌生，這就是我們在課堂上所做的工作，我認爲我們需要檢查多次被檢查是愚蠢的，因爲我以前從未遇到過這種情況。 – nviens

@ user3272438終於想通，只有一個在這裏group' name屬性爲'單選按鈕選擇是告訴我們的單選按鈕屬於哪個組，但在你的代碼中沒有名字的屬性，使每個無線電被視爲一個獨立的組，並得到選擇每一個 – Ankanna

的輸入沒有name屬性設置，因此它們不進行分組

正如你可以在這裏看到，單選按鈕只允許一個選擇當命名時：

<div> 
<form target="_blank" onsubmit="try {return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);} catch (e) {return false;}"> 
<input name="group_name" type="radio"> one<br> 
<input name="group_name" type="radio"> two<br> 
<input name="group_name" type="radio"> three<br> 
</form> 
</div>

jsfiddle

這就是說，我不知道爲什麼你被告知使用單選按鈕進行多項選擇。他們絕對不是爲此而設計的

來源

2016-02-16 20:13:12

我們正在使用單選按鈕單個選擇，但我們需要檢查的是，當表單提交這對我來說似乎是愚蠢的只有一個單選按鈕被選中。 – nviens

@ user3272438你將不得不問他們爲什麼選擇這樣做，似乎傻對我來說太 –

所以基本上給他們相同的名稱將刪除需要使用JavaScript – nviens

單選按鈕需要共享相同的名稱屬性才能表現得如此。換句話說，一次只能檢查一個同名的單選按鈕。

如所述通過MDN

無線電：一個單選按鈕。您必須使用value屬性來定義此項目提交的值。使用checked屬性來指示默認情況下是否選擇此項目。 具有相同值的name屬性的單選按鈕位於同一個「單選按鈕組」中;一次只能選擇一個組中的一個單選按鈕。

這裏是你的代碼調整，以表現得那樣。

<html> 
    <head> 
    <META http-equiv="Content-Type" content="text/html; charset=utf-8"></head> 
    <body> 
    <div> 
    <form target="_blank" onsubmit="try {return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);} catch (e) {return false;}"> 
    <input type="radio" name="field"> one<br> 
    <input type="radio" name="field"> two<br> 
    <input type="radio" name="field"> three<br> 
    </form> 
    </div> 
    </body> 
</html>

因此，它取決於你什麼樣的方法，你想使用。

來源

2016-02-16 20:13:19 ooredroxoo

單選按鈕需要成爲一個組的一部分，最多可以選擇一個按鈕。該組用name屬性表示。組中的所有單選按鈕應具有相同的name。

這是你更新的提琴：你必須把它們放在一個組https://jsfiddle.net/8fn0hfoh/1/

來源

2016-02-16 20:13:25 Matt

。你可以做，如果你使用它考慮爲一組同名像這樣

<form action=""> 
 
    <input type="radio" name="gender" checked> Male<br> 
 
    <input type="radio" name="gender" > Female<br> 
 
    <input type="radio" name="gender" > Other 
 
</form>

。 name="gender"這樣。

來源

2016-02-16 20:14:21

這是因爲你需要提供相同的名稱屬性時，輸入類型爲廣播：

<form method="post" action=""> 
<input type="radio" name="radio">one 
<br> 
<input type="radio" name="radio">Two 
<br> 
<input type="radio" name="radio">Three 
<br> 
</form>

來源

2016-02-17 10:05:41 virat

選擇多個選項的單選按鈕

回答

相關問題