允許多選的HTML單選按鈕

在我的HTML表單中，我將下面的內容作爲一組單選按鈕，具體取決於您選擇的單選按鈕取決於下一個表單<fieldset>的顯示內容，這一切都可行。問題出於某種原因，它們像複選框一樣工作，而不是單選按鈕。所以你可以選擇所有的選項，而不是一次選擇一個。允許多選的HTML單選按鈕

任何人都可以看到下面的代碼中哪裏出錯了嗎？

<fieldset> 
     <legend>Please select one of the following</legend> 
     <input type="radio" name="track" id="track" value="track" /><label for="track">Track Submission</label><br /> 
     <input type="radio" name="event" id="event" value="event" /><label for="event">Events and Artist booking</label><br /> 
     <input type="radio" name="message" id="message" value="message" /><label for="message">Message us</label><br /> 
    </fieldset>

來源

2014-01-07 ThePagan

他們都需要有相同name屬性。

單選按鈕按name屬性分組。以下是一個示例：

<fieldset> 
    <legend>Please select one of the following</legend> 
    <input type="radio" name="action" id="track" value="track" /><label for="track">Track Submission</label><br /> 
    <input type="radio" name="action" id="event" value="event" /><label for="event">Events and Artist booking</label><br /> 
    <input type="radio" name="action" id="message" value="message" /><label for="message">Message us</label><br /> 
</fieldset>

來源

2014-01-07 22:10:42 lukasgeiter

+1拍我對它:) – lhan

不能相信這是多麼明顯，我想我需要休息一下。好一個。在9分鐘內允許我接受。 – ThePagan

不錯，我爲你加了一個jsFiddler – Ljubisa

輸入的名稱必須相同才屬於同一組。然後，其他人將被點擊時自動取消選擇。

來源

2014-01-07 22:12:43 MarijnS95

要使單選按鈕正常工作，您必須按他的名字進行分組。（實施例名稱= 「類型」）

<fieldset> 
    <legend>Please select one of the following</legend> 
    <input type="radio" name="type" id="track" value="track" /><label for="track">Track Submission</label><br /> 
    <input type="radio" name="type" id="event" value="event" /><label for="event">Events and Artist booking</label><br /> 
    <input type="radio" name="type" id="message" value="message" /><label for="message">Message us</label><br />

它將返回檢查的單選按鈕的值（實施例跟蹤|。事件|消息）

來源

2014-01-07 22:18:31

嘗試形成的這種方式，它是相當花哨......

看一看這個的jsfiddle

Button-Radio

The idea is to choose a the radio as a button instead of the normal circle image.

來源

2014-05-21 05:44:23 user3577753

非常好，高效的解決方案！ –

所有單選按鈕必須添加相同的名稱屬性。

來源

2014-10-21 06:56:01 user3040525

我已經做到了，在過去這樣，JsFiddle：

CSS：

.radio-option { 
    cursor: pointer; 
    height: 23px; 
    width: 23px; 
    background: url(../images/checkbox2.png) no-repeat 0px 0px; 
} 

.radio-option.click { 
    background: url(../images/checkbox1.png) no-repeat 0px 0px; 
}

HTML：

<li><div class="radio-option"></div></li> 
<li><div class="radio-option"></div></li> 
<li><div class="radio-option"></div></li> 
<li><div class="radio-option"></div></li> 
<li><div class="radio-option"></div></li>

的jQuery：

<script> 
    $(document).ready(function() { 
     $('.radio-option').click(function() { 
      $(this).not(this).removeClass('click'); 
      $(this).toggleClass("click"); 
     }); 
    }); 
</script>

來源

2015-06-04 20:03:24

我非常喜歡這種方式，意味着您可以獲得更多選項來自定義複選框的外觀，然後您是否有隱藏的輸入字段來記錄表單中的結果，還是純粹通過JS來收集該信息？ – ThePagan

謝謝，我想你可以這樣做，@ThePagan。我注意到我有兩個不同的圖像......不知道爲什麼我還沒有糾正。應該是一個具有背景位置更改的精靈，否則在移動設備上可能會有圖像加載工件。 –

允許多選的HTML單選按鈕

回答

相關問題